CODEWITHSUNDEEP
mobilescreencss
Pablo
Pablo

Reputation: 10612

Where does this max-width (@media) CSS come from?

There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:

@media (max-width: 767px) {
    .sliderContent {
        width: 100%;
    }
}

When I check one page on an iPhone, it loads this CSS, but the other does not use this style.

I have added an alert with the screen size in both pages, and both have the same width.

Do you know where the max-width is taken? that could be making the difference between the two pages?

Can the HTML somehow affect the size of the min-width?

Upvotes: 1

Views: 219

Answers (1)

bmasterson
bmasterson

Reputation: 269

Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.

The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.

https://hacks.mozilla.org/2013/09/css-length-explained/

Upvotes: 1

Related Questions