CODEWITHSUNDEEP
css
SparkDesigns
SparkDesigns

Reputation: 75

Media Queries issue and Responsive View Tool in FF

I'm having an issue with media queries. I'm using the Responsive View Tool in Firefox to view my site at 480px. But it seems to be firing at 430px and not 480px. I've no idea why.

/*
 *  Gird layout for devices above 480px.
 */
@media screen and (min-width: 480px) {
html {
    background: red;
}
}

I have no other code or media queries so I'm wondering if this is some type of bug.

Screenshot:

enter image description here

Upvotes: 2

Views: 387

Answers (3)

Contra
Contra

Reputation: 2783

check your zoom, if you have zoomed in, width will be off. ctrl+0 to reset zoom to default 100%

Upvotes: 1

SparkDesigns
SparkDesigns

Reputation: 75

You won't believe this, and I am posting this incase anyone happens to have the same problem.

At some point I had made my browser text smaller using (CMD and - on the Mac). It was breaking in the correct width but because my font size was smaller it was throwing me off. It was actually breaking in the correct place, but the Responsive Viewer wasn't displaying the width based on my font size.

Upvotes: 2

Duncan Beattie
Duncan Beattie

Reputation: 2366

If you inspect the computed witdh of the html element after setting the responsive tool to 480 you will get a value of 465. set overflow: hidden; on the html element then check again and you get 480.

Firefox takes the width of the scrollbars into account when calculating viewport width, as opposed to Chrome which overlays the scrollbars.

Upvotes: 1

Related Questions