html - Having trouble with css media queries -

html - Having trouble with css media queries -

i want hide menu icon on smartphone screens media query isn't working. can shed insight?

i tried looking @ other answers on here nil helped checking re-sizing browser i'm using max-width should still show.

i have 3 different logos. 1 desktop, 1 tablet, , 1 mobile. right i'm trying hide desktop logo mobile , it's not working thought seek find out why before trying hide/reveal more images.

update: solved. i'm not sure why works after constant refreshing , 30 minutes later works.

class="snippet-code-css lang-css prettyprint-override">/* smartphones (portrait) ----------- */ @media screen , (max-width : 320px) { #menu-logo { display: none; } } class="snippet-code-html lang-html prettyprint-override"><div id="header" class="header"> <a href="/index.html"><img id="menu-logo" src="../images/logo.svg"/></a> <a href="/index.html"><img id="menu-logo-semi" src="../logo-semi.svg"/></a> <a href="/index.html"><img id="menu-logo-small" src="../logo-short.svg"/></a> </div

there's no need have 3 links.

a improve way follows:

<div id="header" class="header"> <a class="logo" href="/index.html">my cool name</a> </div> <style> <!-- desktop --> .logo { display: block; text-indent: -9999px; width: 200px; height: 82px; background: url(logo.svg); background-size: 100px 82px; } <!-- tablet --> @media , (max-width: 64em) , (min-width: 48em) { .logo { width: 80px; height: 60px; background-size: 80px 60px; } } <!-- mobile --> @media , (max-width: 48em) { .logo { width: 50px; height: 30px; background-size: 50px 30px; } } </style>

cleaner code.. alter logo sizes need.

edit don't know if logo changes visually on each screen resolution interval. if so, state "background: url ..." rule on each media query, before "background-size". if not, ok since it's vector, long proportions correct.

html css