Myujth

Hey everyone i'm currently struggling with media queries in my website. I need to build a website that changes certain things according to screen size of the device.

I have copied the media query from the internet and added the Meta view-port. My friend has the exact same thing and there it works fine. I've added some code as reference. This should just work right?

Could someone tell me why it doesn't?

/*Mobile media query*/
@media only screen and (max-width: 360px) 
 .blue_box2
 display:none;
 

My HTML viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Have you got any conflicting code outside of this media query (or any inline styles in your HTML) that could cause it to function incorrectly?

The query you've shown works fine, which leads me to believe it's a problem with the code you haven't shown.

HTML

<div class="blue_box2" style="width:200px; height:200px;">
</div>

CSS

.blue_box2 background:red; 

@media only screen and (max-width: 360px) 
 .blue_box2 
 background:blue;
 

Just a thought:
Are you testing this using Google Chromes Developer Tools (F12), as just shrinking your browser window down normally may not reach as low as 360px.

Have you tried the following?:

@media only screen and (max-width: 360px) 
.blue_box2
 display:none !important;

or this :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

My view port wouldn't work unless i put 1.0. Just wondering if the same is happening to you.