How do I make the background color responsive on mobile devices?

Question

I have created a website using bootstrap and the responsive features works fine, except for the background color of the div. The elements (images) are stacked but the background color remains only behind the first image in the row. I am looking for a way to extend the background-color on mobile devices.

HTML:

<div id="omos">
 <div class="row">
 <div class="col-md-6 col-xs-12">
 <h2>Kristoffer Andreasen</h2>
 <a href="http://dk.linkedin.com/pub/kristoffer-andreasen/4b/2a0/645/"><img     style="height:280px; width:420px;" src="http://i.imgur.com/874qJmM.png" class="img-responsive"></a>
 <div class="Krille">
 <p>Indhold</p>
 <p>Marketing</p>
 <p>Webdesign</p>
 </div>
 </div>
 <div class="col-md-6 col-xs-12">
 <div class="Kalli">
 <h2>Kasper Hjortsballe</h2>
 <a href="http://dk.linkedin.com/pub/kasper-hjortsballe/55/942/5b9"><img style="height:200px; width:200px;" src="http://i.imgur.com/kTleong.png" class="img-responsive"></a>
 <p>Programmør</p>
 <p>Layout</p>
 <p>Grafik</p>
 </div>
 </div> 
 </div>
 </div>

CSS:

#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}

I have tried several options but no one seems to solve the problem. Does anyone know what to do?

Solution 1

Remove the height property of the div, and it should work.

Solution 2

Bootstrap uses media queries to show things differently on differnet sized screens. If you're saying your CSS works on desktop but not on mobile, it would be because you're not using media queries.

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* your mobile css, change this as you please */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* your desktop css */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

Solution 3

let's think about what your style sheet does,

height: 80vh;

that makes us do something that is 80% of the viewports height, so if our div stacks outside of that when switching to 12 col it is not going to get the color, as your color is not based on the div, but is based relative to the viewport, twitters media queries however will change your child elements and override this wrapping divs height, so you get stuck, I'd see if min-height will work, or remove height all together if possible(not sure what you're vision is exactly)

Solution 4

Set the height property to auto, it will work fine.

height: auto

View more solutions