Checking the optimization for mobile sees the page crookedly?

Question

css

Good day. I can't figure out why Google's "Mobile Optimization Checker" doesn't display the mobile version correctly, even though it works fine on all devices. I am attaching a screenshot.

Answer 1

Hello.
Look at the contents of the robots.txt file
. Most likely, you have denied Googlebot access to the css & js files of the theme, which is why the site does not display correctly.
Add the following lines to robots and check again:

User-agent: Googlebot
Allow:	/*.css*
Allow:	/*.js*
Allow: 	/*.ttf*
Allow: 	/*.woff*
User-agent: Googlebot-Mobile
Allow:	/*.css*
Allow:	/*.js*
Allow: 	/*.ttf*
Allow: 	/*.woff*

Answer 2

Use - www.responsinator.com
Helps to see the whole picture.
And device coverage is better done like this:

@media screen and (max-width:767px) {

}
@media screen and (min-width:768px) and (max-width:991px) {
   
}
@media screen and (min-width:992px) and (max-width:1199px) {
  
}
@media screen and (min-width: 1200px) {
 
}

Then you capture all dimensions at once.

Answer 3

Seems to have figured it out. For some reason, he reacted to the property: min-width. And even commented out.