Chrome web developer tool changes screen resolutions

Question

Well, i was developing a responsive website and i found out that, i don't know if it's a bug or some configuration, but while using the chrome website developer tool, when i resize the screen to a smartphone resolution, the screen resizes weird in some times, i don't know how to exactly describe the behavior, but for example, when i select the moto g4 resolution it shows me something like this:

And after some page refreshs i realize that the content it's shown different to something like this:

As far i know i haven't changed any configuration and if you can see the resolution and the zoom percentege is the same, i don't know what it could be but it's annoying as i try to design responsive. I appreciate any help:)

Answer 1

It might be in the way you have setup your responsiveness. Did you you scale from mobile first or from web first when you did you css did you right down your media query did you scale from max width or min width? feel like it has something to do with your media querys but might be wrong