Media queries are not adapting the layout in mobile browser

Question

I have used the media queries for different width.I have used 3 Style sheets for mobile, tab and desktop views as follows:- For Mobile View:-

@media only screen and (min-width : 120px) and (max-width : 640px) { }

For Tab View:-

 @media only screen and (min-width : 640px)and (max-width : 980px){  }

For Desktop View:-

@media only screen and (min-width : 980px) { }

When I am re sizing my browser then it is showing the adaptive view but while checking in mobile device the web page is still showing the browser view.

The responsive view is also not adaptive while checking in the Device Emulator functionality of the google chrome browser.

However the side menu bar used for mobile view is still visible in the mobile view as expected but the remaining site is not adapting the width and height accordingly.

Can anyone explain the issue and reason behind it.

PS : I am restricted to media queries not able to use Bootstrap or any other framework for making my site responsive.

Answer 1

Here we go. As per your media queries, browser is not sure what layout should be adapted because you have defined the same width as break point. What you need to do is define media queries like this.

For Mobile View:-

@media only screen and (min-width : 120px) and (max-width : 639px) { }

For Tab View:-

@media only screen and (min-width : 640px)and (max-width : 979px){  }

For Desktop View:-

@media only screen and (min-width : 980px) { }

Hope this help you.! Do come back if still having issue.!

Answer 2

1. Try to remove only screen and and leave it like @media (min-width : ... these attributes is not required.
2. If it works but you really want to use screen and just remove the only keyword. From specs :

The keyword 'only' can also be used to hide style sheets from older user agents. User agents must process media queries starting with 'only' as if the 'only' keyword was not present.

3. If at least something from @media section is working for your mobile device make sure that ALL your @media sections placed at the bottom of your CSS file and that this file are linked to you html the latest among all other CSS files. If it still doesn't work for you as expected check your actual CSS code or make a demo for us. How to make Minimal, Complete, and Verifiable example

PS.: You don't have to specify min-width for the smallest screen in the list of @media