Guys, please help. I'm writing media queries for a webpage and checking the progress with chrome dev tools, but I'm noticing that the values aren't exactly accurate. For example, when the view width is 600px on chrome dev tools, the queries I write for 600px don't actually apply until I've increased the view width to 670px, as you can imagine this inaccuracy is unhelpful. Does this happen to anyone here? And is there a solution I'm missing or a better alternative to chrome dev tools I could be using?
Edit for more details:
I'm using the responsive feature of the chrome dev tools to check the results of my CSS media queries. When I write some styles in a media query for a max-width of 600px for example, the styles do not get applied even when the responsive dev tool is at a max width of 600px or below, the styles only apply when I increase the width of the responsive view up to about 650px.
If I were to write some styles for a max-width of 800px, those styles still do not get applied even though the width of the responsive tool is 800px or below (which is when the styles in the 800px @media query are meant to apply), it only gets applied when I increase the width to about 870px. So it's inaccurate for some reason.
cedric simon
Web dev
Just to be sure, you have
<meta name="viewport" content="width=device-width">in your head tag? Also, try to not use the zoom in chrome, I had inconsistencies as well on that regard.Tell me if that helps.