SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Chrome Media Query Bug?

    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. #2
    SitePoint Addict bronze trophy mawburn's Avatar
    Join Date
    Apr 2014
    Posts
    222
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toad78 View Post
    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.
    Have you tried the Chrome Emulation Panel?

    https://developers.google.com/chrome...bile-emulation

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

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Chrome works just fine in this respect—at least on Mac. It works best if you dock the inspector to the right:

    dock.png

  4. #4
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That sounds like a problem with your code rather than with the browser.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Happens in Firefox, too, so it's not Chrome specific. It's a code problem, as @ralph.m ; said.

  7. #7
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by ronpat View Post
    Happens in Firefox, too, so it's not Chrome specific. It's a code problem, as @ralph.m ; said.
    Any way to pinpoint? I'd imagine I can start over again, but I would rather narrow down the problem.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It looks like you fixed the problem by reducing the width of the nav items

    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. #9
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    It looks like you fixed the problem by reducing the width of the nav items

    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.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •