Issue with media queries

Hi all.

Having completed html & css courses I am now finalising my Colmar academy design, however when adding a media query for mobile design it seems to either break my entire code or not show at all when parameters are met within safari but it works fine with chrome?

@media (max-width: 500px) {.nav {display: none;}

is the code I add in to my css, and as stated works as intended within chrome.

Is there something I’m missing as to why it will work in one and not the other?

Hello @data7412699309, welcome to the forums! The syntax for a media query is:

@media only screen and (max-width: 500px){
/*code*/
} 

What happens when you put the only screen in?

Hi @codeneutrino this now seems to work on safari also, although I’m 99% sure I initially tried it with this first of all.

Thank you

1 Like