XF 2.2 Apply CSS for all but not for mobile view

[sbj]

I want to use CSS which is applied for every view except for the mobile view.

What would be the way to do so?

 

[Paul B]

There is no "mobile view".

It's based on screen widths using breakpoints.

To hide/show content at or below the narrow breakpoint, you would use, e.g.:

@media (max-width: @xf-responsiveNarrow)
{
    .block[data-widget-key="new_threads_forum_list"]
    {
      display: none;
    }
}

These are the pre-determined breakpoints and the classes which can be used:

@media (max-width: @xf-responsiveWide)
{
    .u-hideWide { display: none; }
    .u-showWideInline { display: inline; }
    .u-showWideBlock { display: block; }
}

@media (max-width: @xf-responsiveMedium)
{
    .u-hideMedium { display: none; }
    .u-showMediumInline { display: inline; }
    .u-showMediumBlock { display: block; }
}

@media (max-width: @xf-responsiveNarrow)
{
    .u-hideNarrow { display: none; }
    .u-showNarrowInline { display: inline; }
    .u-showNarrowBlock { display: block; }
}

 

[sbj]

I understand. I called it "mobile view", but it is breakpoints. But my question still stands.

I don't want to target the narrow breakpoint, the opposite of it. So what is the negation for that?

Or should I list the other two instead like this?

@media (max-width: @xf-responsiveWide), @media (max-width: @xf-responsiveMedium)

{
    .u-hideWide { display: none; }
    .u-showWideInline { display: inline; }
    .u-showWideBlock { display: block; }

}

Would this work?

 

[Paul B]

If the content is normally displayed, then hide it at the narrow breakpoint.

If it is normally hidden, display it.

If you post what you are trying to do then more precise instructions can be provided.

 

[Russ]

Min queries:

@media (min-width: (@xf-responsiveNarrow  + 1))
{
css
}

This makes it so the CSS will essentially "disappear" at the narrow width.

 

[sbj]

@Russ's solution is what I was looking for, thank you. But thanks Brogan for the explanations.