This is the first installment of what I intend to be a collection of short summaries of the solutions that I found to some bug in my code. I want to document some of these solutions for my own sanity (so I can remember challenges that I've overcome in the past) and in the hopes that someone googling for their answer in the future will find their own solution more quickly this way. I'm also going to try writing out a variety of the ways that I think I or another programmer might phrase their searches.
BUG:
"media queries not working on device toolbar" or "responsive breaks not working in chrome dev tools" or "chrome dev tools devices not changing with media queries" or "why media queries no effect in chrome tools"
Detailed Description:
I designed a website (desktop first instead of mobile first, bad habit) and started adding media queries for responsive design. When I resized the screen in the developer tools I saw my changes (small header, fewer grid columns, etc), but when I clicked on the "Toggle Device Toolbar" button to use Chrome's built in devices, none of my responsive design was reflected.
Experiments:
First, I re-read about media queries, and remembered to add "only screen" after the "@media" bit, and I got excited because I thought that would fix it...but it didn't. No change.
Second, I added a big ugly border to the header under 'max-width: 599px', and determined for certain that I wasn't crazy, because the header just wasn't showing up on the mobile views.
Solution:
Thorough Explanation:
Takeaway:
I ran into this problem because I never really understood why that meta tag is in most boilerplate HTML. Now I understand a little better, and will probably remember if something like this happens again. I ran into the problem because I made a local copy of one of a CodePen of mine and forgot to include that tag.
So,
content="width=device-width..."
is the line that fixed my problem.
Top comments (0)