Hide/show an element below a breakpoint (responsive) issues

  • Resolved bananajuice

    (@bananajuice)


    9 years, 9 months ago

    Hi,

    I’m having an issue with some simple CSS. I am building out my own Storefront child theme and I want to hide an element below a breakpoint.

    As part of my site I have made a full width top bar, where I have put the account registration link. I want to hide this top bar and registration link on mobile. However, the usual CSS I would usually use doesn’t seem to work and I have been unable to find a solution.

    @media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .top-bar .account-registration {
    display: none !important;
  }
}

    Does anyone have any pointers? Thanks all.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter bananajuice

    (@bananajuice)

    9 years, 9 months ago

    Sorry just to add – min-width media queries seem to work, but max-width do not. Very strange?

    I.E I have used

    @media screen and (min-width: 768px) {
.slider {
display: none;
}

    To test hiding a slider – and that seems to be fine.

    Thread Starter bananajuice

    (@bananajuice)

    9 years, 9 months ago

    Ignore this – I have fixed it! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Hide/show an element below a breakpoint (responsive) issues’ is closed to new replies.