[Eurotool]

Hi, I’m using the Taste theme and would like to keep the website’s logo in desktop mode, while hiding it in mobile mode (it currently shows in the header’s center in mobile).

I’ve tried various combinations of the following block of custom CSS with no success:

@media screen and (max-width: 20rem) {
    .logo {visibility: hidden;}
}

I alternated between max-width/min-width, screen/all/not all/only screen with no success. While the block of code does work on Chrome’s Inspect Element, it doesn’t seem to be applied after I save and preview the custom CSS.

[Eurotool]

Solved by using pixels instead of em/rem:

@media only screen and (max-width:900px) {
  .logo {
    display: none;
  }
}

Not sure if this is the correct way to do it though. The rest of the theme seems to be using em/rem in @media switches.

[Author]

Posts