Sign in

Hiding logo upon going mobile

  • This topic has 1 reply, 1 voice, and was last updated 2 years, 1 month ago by .
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #6195
    Avatar photoEurotool

    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.

    #6197
    Avatar photoEurotool

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.