XF 2.2 How to display notice only to small viewports?


Well-known member
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.


Well-known member

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.


Well-known member
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.


XenForo moderator
Staff member
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.