Question

Here is the css I am reading:

 .card {
        font-size: 72px;
        padding: 80px 40px;
    }

    .x-phone .card {
        padding: 15px;
        font-size: 36px;
    }

What is the significance of x-phone? I am guessing, and this is a pure guess, that the css is saying, for the case a mobile device is detected, overide the .card styling class rule with .x-phone .card styling rule?

Is that correct? I searched the sencha touch api and google with no answer.

Thanks

Answer 1

If you look at body-tag’s classes and change User Agent strings, you can see that it will change the class between x-desktop, x-phone and x-tablet.

So yes, it will override .card’s styles when on phone.