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

oldford

Active member
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:
Code:
    <div class="narrowhide">this text should hide at medium width</div>

In my extra.less file I have this:
Code:
div.narrowhide {
  ;
}

@media (min-width: (@xf-responsiveMedium)) {
  div.narrowhide {
    display: none;
  }
 
I feel dumb. I was missing the last bracket.

The correct code is:

Code:
div.narrowhide {
  ;
}

@media (min-width: (@xf-responsiveMedium)) {
  div.narrowhide {
    display: none;
  }
}
 
You have already defined the class for the content so you can just use:

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