XF 1.4 Assistance with Responsive design and header/background please

[the]

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)
{
CSS HERE
}
</xen:if>

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

 

[Paul B]

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.