This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Why might Responsive Design View disagree with the Box Model for the HTML element?

  • 5 replies
  • 3 have this problem
  • 3 views
  • Last reply by jxxmxxj

jxxmxxj
jxxmxxj
more options

In the web page I'm writing right now, the Responsive Design View's width number doesn't match the width shown in the Box Model view (which means my media queries don't appear to be triggered at the correct width breakpoints). See the attached screenshot, which shows the page in RDV, the Box Model view, and a tooltip with the HTML element's dimensions.

I've not yet managed to reproduce this in a simpler page, though I'm still trying. I've ruled out the possible influence of inner iframes and the meta viewport tag.

So, I'd like to know what might cause the two tools to report different width figures.

Cheers, Jordan

In the web page I'm writing right now, the Responsive Design View's width number doesn't match the width shown in the Box Model view (which means my media queries don't appear to be triggered at the correct width breakpoints). See the attached screenshot, which shows the page in RDV, the Box Model view, and a tooltip with the HTML element's dimensions. I've not yet managed to reproduce this in a simpler page, though I'm still trying. I've ruled out the possible influence of inner iframes and the meta viewport tag. So, I'd like to know what might cause the two tools to report different width figures. Cheers, Jordan

Chosen solution

jscher2000 said

Ah, I tested using 38.0.5. Could this be a zoom glitch?

D'oh! That was it! I was slightly zoomed-out, and after a Cmd+0, RDV now agrees exactly with the Box Model, and the media queries are behaving as they should.

Side note: The zoom was causing a second problem, since it was scaling a width of 430px to a number between 480px and 481px, triggering neither of my media queries (one of which had max-width: 480px, the other min-width: 481px). That was almost as puzzling as the numbers not matching in the first place.

Thanks again!

Read this answer in context 👍 1

All Replies (5)

jxxmxxj
jxxmxxj Question owner
more options

jxxmxxj said

See the attached screenshot, which shows the page in RDV, the Box Model view, and a tooltip with the HTML element's dimensions.

Whoops, seems the screenshot didn't attach. Let's try that again...

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
more options

If the body element is wider than html element, it can indicate a min-width or some other impediment to narrowing the body.

I'm not sure whether choosing a responsive design preset fires the resize event. If you drag the resizing handle on the right side one way or the other, does that make any difference?

jxxmxxj
jxxmxxj Question owner
more options

Thanks for your quick reply!

jscher2000 said

If the body element is wider than html element, it can indicate a min-width or some other impediment to narrowing the body.

Good idea. I suspect that something like that is going on, but I haven't nailed it down yet; the immediate sub-elements all have width specified either as a pixel count well below the window width, or as 100% (with zero padding, margin, and side border).

And I haven't set an element's min-width anywhere, period.

The width reported by the Inspector is consistently very close to 1.11667 times the width shown in Responsive Design View.

FWIW, I also just noticed that the little SVG logo (loaded via an IMG tag) I have in my navbar is similarly miscalculated; RDV shows 28.2388 and Inspector shows 31.5317 for its width (which is calculated by a preprocessor and specified in px in the resulting stylesheet).

I'm not sure whether choosing a responsive design preset fires the resize event. If you drag the resizing handle on the right side one way or the other, does that make any difference?

Yes, it's behaving consistently across all these ways of setting the width:

  • choosing presets
  • typing new widths in the preset box
  • dragging the right-hand resize handle
  • typing "resize to <W> <H>" in the Developer Toolbar

However, if I open the document in a new window via window.open() and then manipulate the resulting window via .resizeTo(), the breakpoints are all correct.

And, thoroughly confounding things, I just now tried it in my ordinary (non-Developer) install of Firefox (v38.0.5), and RDV behaves correctly there.

Any other thoughts?

Modified by jxxmxxj

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
more options

Ah, I tested using 38.0.5.

Could this be a zoom glitch?

jxxmxxj
jxxmxxj Question owner
more options

Chosen Solution

jscher2000 said

Ah, I tested using 38.0.5. Could this be a zoom glitch?

D'oh! That was it! I was slightly zoomed-out, and after a Cmd+0, RDV now agrees exactly with the Box Model, and the media queries are behaving as they should.

Side note: The zoom was causing a second problem, since it was scaling a width of 430px to a number between 480px and 481px, triggering neither of my media queries (one of which had max-width: 480px, the other min-width: 481px). That was almost as puzzling as the numbers not matching in the first place.

Thanks again!

Modified by jxxmxxj