XF 1.4 Assistance with Responsive design and header/background please


Active member
And Delete me ..... The resource below that is linked is correct. I was implementing wrong. Thank you

I have been reading the responsive design resource, but I'm pretty new to this. I am okay at using a media query at any one size.

/* make the background and header different for Narrow responsive */
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)

Now I need help understanding how to do something as I go from one responsive limit to the next.
So when I use the above, that is telling it to apply that CSS for everything under the Narrow limit. I can get the same done for everything under the Medium limit. But then I'm applying both the Narrow CSS and the Medium CSS. How do I apply CSS under Narrow, above narrow and below medium, etc. ?

Thank you for any help!

I am reading this:

Responsive Design

When I attempt multiple widths, it applies the narrow and the medium stylings. That is my trouble spot
Last edited:


XenForo moderator
Staff member
Depending on the CSS you are applying, you should be able to override what is being applied at the narrow width in the medium width by adding a new property.