user298519 user298519 - 6 months ago 12
HTML Question

Divs don't span whole width.

Looking at other SO questions, I managed to get the left divs span the whole page, but not the right divs. How do I fix this problem?

HTML:

<div class="container-fluid">

<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">

<div id="kpop" class="selection">

</div>


<div id="fashion" class="selection">

</div>

</div>


<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6">

<div id="martialarts" class="selection">

</div>

<div id="nature" class="selection">

</div>

</div>

</div>




CSS:

body .container-fluid {
padding-left: 0;
padding-right: 0;
}

.selection {
height: 50vh;
}


Here's a demo:
http://codepen.io/davegumba/pen/QNzpey

Answer

You didn't wrap your col classes in a row tag. Also you don't need to specify all the viewport sizes if they are all 6, for example. Col-xs-6 alone will apply to all sizes higher if you don't specify.

http://codepen.io/ruchiccio/pen/oxJWLQ

<div class="container-fluid">

  <div class="row">

    <div id="kpop" class="selection col-xs-6">
    </div>
    <!--kpop-->

    <div id="fashion" class="col-xs-6 selection">
    </div>
    <!--fashion-->

  </div>
  <!--first column-->
  <div class="row">

    <div id="martialarts" class="col-xs-6 selection">
    </div>
    <!--martial arts-->

    <div id="nature" class="selection col-xs-6"> </div>
    <!--nature-->

  </div>
  <!--second column-->

</div>
<!--container-->
Comments