Media queries issue

Question

I want to show my webpage on mobile devices similar to desktop version-which I have done it. Here I didn't add viewport tag to my page. Im trying to increase only font-size on mobile devices for that I have written media queries like :

@media (max-width: 576px) 

or

@media screen and (max-width: 576px)

when I resize the browser to 575px font-sizes are changing but when I actually inspect on chrome I don't see media query snippets which I have applied and not on actual mobile devices as well.

Answer 1

@media only screen and (max-width: 576px) {
  body {
    background-color: lightblue;
  }
}

This how you should add your media query. Just change the body to any element / class / id you want.

Answer 2

If the media query is being used, then you should be able to see it in the Chrome devtools under the 'styles' tab.

It will include the query being used and the associated styles. If your browser isn't the right size to use the media query, it will not be visible in the tab. So to see it in the dev tools, in your case, your browser will have to be less than 576px wide. You can also achieve this by toggling the 'device' option, this way you can resize the browser for you page, and keep Chrome at full size.

See images below:

You can see the media query styles being used

This blue icon is the device toggle button