XF 2.2 How to display notice only to small viewports?

[djbaxter]

I need to wrap a notice in a conditional so that it only displays to smaller viewports.

Specifically, to smartphones (both vertical/portrait and landscape mode) and tablets in portrait mode but NOT in landscape mode.

Can someone help me with the appropriate conditional?

Alternatively, I guess I could wrap the notice in a div and then add CSS to display:block to those conditions and display:none if the device/viewport does not meet those conditions.

Either way, I could use some help with either method.

 

[Paul B]

You use a media query, not a conditional statement.

Use this guide to create the notice and give it a specific class: https://xenforo.com/community/resources/display-a-notice-in-specific-threads-or-forums.8197/

Then use the media query in the extra.less template:

@media (max-width: (@xf-responsiveNarrow  + 1))
{
    .ctaNotice
    {
        display: none;
    }
}

 

[djbaxter]

Thank you!

 

[djbaxter]

@Brogan

This still displays for iPad in landscape mode though:

@media (max-width: (@xf-responsiveNarrow  + 1))
{
   .unreg-box {
   display: none
    }
}

It should not display for landscape mode with tablets.

 

[Paul B]

It's based on the viewport width.

Landscape mode is naturally wider than portrait mode.

 

[Old Nick]

@media (max-width: (@xf-responsiveNarrow + 1))

Why the +1 here ?
What difference with and without ?

Thanks.

 

[djbaxter]

@Brogan Exactly. But right now it's displaying to all widths?

@media (max-width: (@xf-responsiveNarrow  + 1))
{
   .unreg-message {
   display: none
    }
}

 

[Old Nick]

Try without the +1

 

[djbaxter]

I think the +1 means ignore if larger than the responsive-Narrow setting, i.e., only block display for larger viewports?

Otherwise it would only block display for smaller viewports which is the opposite of what I need.

 

[Paul B]

Try this instead:

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

 

[djbaxter]

@Brogan that correctly toggles it for small screens but not for tablets in portrait mode.

 

[Paul B]

Then you need to reduce the break point to account for the tablet viewport.

Experiment with different values in place of @xf-responsiveMedium until you get what you want.