CODEWITHSUNDEEP
htmlcss
Bob
Bob

Reputation: 207

Having trouble with css media queries

I want to hide my menu icon on smartphone screens but the media query isn't working. Can anyone shed some insight?

I tried looking at some other answers on here but nothing really helped as I am checking it by re-sizing my browser but I'm using max-width so it should still show.

I have three different logos. One for desktop, one for tablet, and one for mobile. Right now I'm trying to hide my desktop logo for mobile and it's not working so I thought I would try to find out why before trying to hide/reveal any more images.

UPDATE: SOLVED. I'm not sure why it works but after constant refreshing and 30 minutes later it works. 

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    #menu-logo {
        display: none;
    }
}
<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

Upvotes: 2

Views: 77

Answers (2)

Jo&#227;o Colucas
Jo&#227;o Colucas

Reputation: 249

There's no need to have 3 links.

A better way to do this is as 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 all and (max-width: 64em) and (min-width: 48em) {
.logo {
  width: 80px;
  height: 60px;
  background-size: 80px 60px;
}
}

<!-- Mobile -->
@media all and (max-width: 48em) {
.logo {
  width: 50px;
  height: 30px;
  background-size: 50px 30px;
}
}
</style>

Cleaner code.. Just change your logo sizes as you need.

EDIT I don't know if your logo changes visually on each screen resolution interval. If so, just state another "background: url ..." rule on each media query, before the "background-size". If not, it will be ok since it's a vector, as long as the proportions are correct.

Upvotes: 1

GuyH
GuyH

Reputation: 796

The cause is most likely due to CSS specficity, and the order of things in your stylesheet(s). We need to see all of the CSS affecting the #menu-logo item, and the img generally, especially the default (ie non-media query) CSS, and any other media queries that affect this menu-logo item.

And we also need to know whether such CSS comes before or after the media query - the order of things is very important. (NB: I know really this would be better as a comment rather than a full answer, but I don't have enough rep for that yet!)

So look at the specificity, and the order, then if still flummoxed give us more of the CSS (or the whole stylesheet if it isn't too long).

Upvotes: 1

Related Questions