CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Nasco.Chachev
Nasco.Chachev

Reputation: 676

Media Query browser resizing issues

I'm applying media queries on my project , but when I`m resizing the browser , it doesn't work.But when I resize it from the developer tool (inspect element) it works...It sounds ridiculous but I'll show you with images.

enter image description here

In the following picture. I've applied media query for my menu-bar. As you can see , when I resize my browser , it doesn't work.

enter image description here

but when I resize the project from the developer tool , it works... I've applied only <meta name="viewport" content="width=device-width, initial-scale=1"> for the media queries.

The second issue is the following. Is there <meta> tag for tablets viewports? Now my Media Query works on all mobiles , but on tablets doesn't. I've tried to reach some answer for mu issue but I didn't find anything...

Upvotes: 0

Views: 301

Answers (1)

Lewie Allen
Lewie Allen

Reputation: 26

My thoughts are that its because your query only applies to the device. If you were to try something like: 

 @media screen and (min-width: 480px) {
    background-color:red;
 }

Try that, but to be honest, I would think about introducing a style framework like Bootstrap. It takes most of the headache around queries away. Also, it's great because you generally want to cater to mobile screens first, and Bootstrap does this pretty well by default.

Upvotes: 1

Related Questions