Chrome Media Query Bug?

HTML & CSS
1

I have some media queries that are working well in IE, FF, and Safari. But when I resize my Chrome browser window looking at a site, the media queries don’t seem to be taking effect. I know that in previous versions of Chrome, there had been issues with Chrome not working well with media queries. Is the same bug still applying with the update V.34? Or is there an alternative fix for this?

I was hoping to find a tool similar to FF Responsive Web Design Tool (even though it’s not foolproof) for Chrome, but haven’t found an alternative.

Suggestions?

2

Have you tried the Chrome Emulation Panel?

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Chrome comes with far more (and better) developer resources than FF.

3

Chrome works just fine in this respect—at least on Mac. It works best if you dock the inspector to the right:

4

Thanks, guys, but I’m still not able to figure out how to get Chrome to respond to media queries and I’m still seeing the same issue only in Chrome. If I take the browser and size it down, I see the main menu wrapping.

5

That sounds like a problem with your code rather than with the browser.

6

Happens in Firefox, too, so it’s not Chrome specific. It’s a code problem, as @ralph_m ; said.

7

Any way to pinpoint? I’d imagine I can start over again, but I would rather narrow down the problem.

8

It looks like you fixed the problem by reducing the width of the nav items :slight_smile:

You should never make a nav fit the width by using pixel widths in a percentage layout. That nav could be done using display:table and display:table-cell without the needs for any widths and it would scale full width nicely and without breaking.

9

Thanks, Paul O’B. I’ll have to keep that in mind if I come across this type of issue again. Using display:table was the furthest from my mind.