Hello, I'd like to apply some styling rules that are screen size dependend, like having a header background image dissapear on a small screen.

I would assume that it would be suffiencient to apply a rule to the template-responsive.css at the specified width:

#navwrap .zen-container{background:none;}

The background image is previously specified in custom.css.
I can't see any effect of this change in the template-responsive.css - is that because the custom.css takes precedence over the template-responsive.css? And if so, how do I work around this?

It would be really great if you could help me out here (I checked on this subject in the forum, but that question might be too specific?)

Thank you in advance, Martin

Hi Martin,

Sure thing there are a few things here.

1. Adding custom code is best done in the custom.css file. That wont get overwritten if you update or compile less in the admin.

2. You will need to declare the screen widths for the rule. eg

3. If it's still not taking hold then you need to make the rule more specific. eg make sure there is an id in the rul eg #bannerwrap or add !important after the rule.

Hope that helps.
Anthony

Thanks, Anthony, great that you pointed this out: I aplied the responsive rule to the custom.css as well, and now it works - previously I thought all responsive rules had to go into the template-responsive.css to make them work. But since the rules specified in custom.css override the template-responsive.css rules, it now makes sense.
Thank you!

Thanks for the update

Cheers
Paul