XF 2.2 How to hide an element at certain screen widths?

[oldford]

I have an HTML sidebar (navigation & banner ad) that I'm trying to hide at medium and smaller screen breaks.

Here's the code I'm trying to use, but it's not working:

In my PAGE_CONTAINER template I have this HTML:

    <div class="narrowhide">this text should hide at medium width</div>

In my extra.less file I have this:

div.narrowhide {
  ;
}

@media (min-width: (@xf-responsiveMedium)) {
  div.narrowhide {
    display: none;
  }

 

[oldford]

I feel dumb. I was missing the last bracket.

The correct code is:

div.narrowhide {
  ;
}

@media (min-width: (@xf-responsiveMedium)) {
  div.narrowhide {
    display: none;
  }
}

 

[Old Nick]

Hello, what the point of this ?

div.narrowhide {
  ;
}

 

[oldford]

Is it not needed? I was going from this example where they define the div first, then define when it's hidden.

I'm a bit new to CSS

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

 

[Paul B]

You have already defined the class for the content so you can just use:

@media (min-width: (@xf-responsiveMedium))
{
    .narrowhide
    {
        display: none;
    }
}

 

[oldford]

Thank you both!