Menu icon Foundation
Div classes stop applying on small screens

This is probably something really simple...
I've applied a class to a div that simply sets a background colour. The background colour looks fine on small and medium screens, but on mobile the colour is removed and the div background is transparent. Very strange...

The class I added is called "rightCol" and all it does is set the div's background colour.

Here's the way I've added the class to the div :

            
<div class="large-5 medium-5 columns rightCol" data-equalizer-watch> 
         

mobilecssdiv

This is probably something really simple...
I've applied a class to a div that simply sets a background colour. The background colour looks fine on small and medium screens, but on mobile the colour is removed and the div background is transparent. Very strange...

The class I added is called "rightCol" and all it does is set the div's background colour.

Here's the way I've added the class to the div :

            
<div class="large-5 medium-5 columns rightCol" data-equalizer-watch> 
         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Neil!

That is because you have put the CSS rules for .rightCol (and .leftCol as well) inside a media query with a min-width of 40.063em (641px).

I noticed you have placed your custom CSS rules in foundation.css. This is not recommended and is probably why you have the problem as you may have placed it in one of Foundation's media queries.

I recommend making a separate stylesheet to accommodate your custom CSS styles.

Rafi Benkual over 5 years ago

Never heard of it. Can you link the page or post all the html and css for this section because that way we can help more.

Neil Name over 5 years ago

Yes sure, the design is unfinished at the moment, but here's a test page : http://www.rural-works.co.uk/index-new.html
I'm using Foundation 5.2.1 by the way...

Wing-Hou Chan over 5 years ago

Hey Neil!

That is because you have put the CSS rules for .rightCol (and .leftCol as well) inside a media query with a min-width of 40.063em (641px).

I noticed you have placed your custom CSS rules in foundation.css. This is not recommended and is probably why you have the problem as you may have placed it in one of Foundation's media queries.

I recommend making a separate stylesheet to accommodate your custom CSS styles.

Neil Name over 5 years ago

D'oh!!! I hadn't noticed that had sneaked into my CSS. I knew it should something simple but couldn't see it for looking! I've taken your advice regarding separating the custom CSS too... that makes a lot of sense.
Many thanks Wing :)