Menu icon Foundation
Backgrounds not showing in mobile

When I shrink my window to the smallest media query all the backgrounds, both images and colours just disappear. The code is the same as I had when using version 4 which worked. Any ideas why this is happening?

/*LARGE SCREEN VERSION*/
.hero {
    	background:url(../img/trees.jpg);
		background-size: 100%;
    	text-align: center;
   		padding: 15% 0 10% 0;
}

@media only screen and (max-width: 40em) { 


.hero { background: #222222;
        text-align: center;
   		padding: 15% 0 10% 0;
}
            

         

errorcssBackground images

When I shrink my window to the smallest media query all the backgrounds, both images and colours just disappear. The code is the same as I had when using version 4 which worked. Any ideas why this is happening?

/*LARGE SCREEN VERSION*/
.hero {
    	background:url(../img/trees.jpg);
		background-size: 100%;
    	text-align: center;
   		padding: 15% 0 10% 0;
}

@media only screen and (max-width: 40em) { 


.hero { background: #222222;
        text-align: center;
   		padding: 15% 0 10% 0;
}
            

         
Jonathan Smiley almost 6 years ago

Are you saying that the background of the .hero element on a small screen is not a dark grey (#222)?

M D almost 6 years ago

Yeh it's white or nothing. Also noted that other errors appear in the small mode too including any height attributes being stripped away