Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nick Basile
17,942 PointsMedia Query Works in Browser but not in mobile
Hi everyone! I am having a problem with my mobile stylesheet. When I resize my browser in Chrome, all of my responsive design works perfectly. However, when I go into the developer tools and toggle the device mode, none of my mobile styling works.
Is this a problem with my code or Chrome?
To clarify, I have included the
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
``` in the
<head>
of my HTML.
I am linking my mobile stylesheet at the bottom of all of my other stylesheets like this:
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen">.
Inside the mobile.css my media query looks like:
@media (max-width: 768px) { /* Styles Here */ }.
Thank you for your help!
5 Answers
Wayne Priestley
19,579 PointsHi Nick,
Try this
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Hope this helps.
Tom Elliott
4,272 PointsI had the same issue and Wayne's response worked!
This:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Jacob Mishkin
23,118 PointsThe first thing I would look at is while your in the chrome dev tools, look and see if anything is crossed out while your inspecting elements. It should tell you wither or not the media query is active. You can also look at the computed menu in the dev tools to see if anything is being overridden. and Lastly while your inspecting the page what is the width of the page? maybe the width of the page is creating problems. I hope this helps.
Nick Basile
17,942 PointsThank you for your suggestions Jacob. Nothing seems to be getting crossed out, and everything works fine in the browser window at all widths. The problem is occurring when I toggle the device mode in the Chrome Dev tools. Only then does my mobile.css not work, but the rest of my stylesheets work fine.
Nick Basile
17,942 PointsOk, I've stumbled on some extra details. When I set the device to a generic notebook and resize the window, my media queries work fine. However, whenever I set it to a mobile device, then my stylesheet stops working. Am I not targeting mobile devices correctly?
Jacob Mishkin
23,118 Pointssorry it didn't work. I have no idea. Your media query looks fine. I hope it works out.
Nick Basile
17,942 PointsNick Basile
17,942 PointsWayne, I appreciate the response, but I said in my question that I had already incorporated this into my code.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi Nick,
Yep, I understand that, but there is a difference between the code you have put in and the code I have suggested,
width=device-widthChrome dev tools won't work without this.Hope this helps.
Nick Basile
17,942 PointsNick Basile
17,942 PointsThank you Wayne, I appreciate the clarification and I'm sorry about the terse response. I tried this and unfortunately it also failed to work. I've been testing my code with Adobe Edge Inspect CC on my mobile, and that is working fine. It seems like this is problem might be coming from Chrome itself, but that seems weird to me.
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi Nick,
I have no probs with your response, i know how frustrating things can get.
If it works on your mobile but on on Chrome trying to emulate a mobile, I would tent to think its okay and just a Chrome bug.
Nick Basile
17,942 PointsNick Basile
17,942 PointsI'm leaning that way myself. I'll let you know what happens when it gets pushed live.