Website looks fine in Firefox responsive design mode, but not in all the other responsive design checking tools?

1

Hi there,

The question is as above, looking at the same resolution my website breaks on all but Firefox, where i tested during development. I’m not sure what code I could post that would be relevant and there is a fair bit of it.

I have the meta viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

So I’m not sure what else could be causing this. If anyone has suggestions I would be grateful!

Edit : Bonus screenshot of problem

Edit 2 : Just ported it to codepen, it doesn’t seem to be working very well, but you can still see the problem with the tabs and search bar that aren’t present on Firefox responsive design mode.

2

Seems like it’s doing it in my Firefox too (version 58.0, Windows 8.1), I tried to match the settings in your screenshot, this is what I’m getting:

screen1
screen1425×651 53.9 KB

I think it has something to do with the width calculations. Check this out, this in Chrome (version 63.0.3239.132) with the widths unchecked on both .tab and .search-bar-btn:

screen2
screen2983×805 148 KB

Lined up the way you intended.

I’m not exactly sure how to fix that. I’ve only dabbled once or twice with doing width calcs but every time I have, it’s been on elements contained in a singular element and the calculation style is set by class on all of them at the same time. If that makes sense. It could be because you have one calc setting on the big first tab and then another on the next two. Meanwhile you have a calc on the search button but not the input field. Might be worth putting the input and button in one container and calcing them together, and the same thing with the tabs.

1 Like
3

Ah of course, the width calculations, that makes a lot of sense! Thank you for the excellent suggestions I will give those a go. Thanks for taking the time to help me out I appreciate it!

1 Like