OneMoreQuestion OneMoreQuestion - 3 months ago 9
CSS Question

How to maintain number of elements / shrink on browser resize

I am learning how to resize div elements as the browser changes size. I want my slider (see Fiddle) to always display 10 slides even when the browser gets smaller (see picture below).

Goal:

enter image description here
The only way I can think of accomplishing this is to make each list element relative to the browser size, so I tried Bootstrap's grid layout but it doesn't work. How can I achieve this? Thanks.

Grid doesn't work as expected:

<div class="row wrapper">
<span class="prev-slide col-md-1"><</span>
<ul class="tab-container row col-md-10">
<li class="col-md-1">Slide 1</li>
<li class="col-md-1">Slide 2</li>
<li class="col-md-1">Slide 3</li>
<li class="col-md-1">Slide 4</li>
<li class="col-md-1">Slide 5</li>
<li class="col-md-1">Slide 6</li>
<li class="col-md-1">Slide 7</li>
<li class="col-md-1">Slide 8</li>
<li class="col-md-1">Slide 9</li>
<li class="col-md-1">Slide 10</li>

</ul><span class="next-slide col-md-1">></span>
</div>


The JSFiddle I provided above does not have Bootstrap grid implemented as it doesn't function.

Answer

when the browser gets smaller you add col-sm-1 and col-xs-1 in to all class.

 <div class="row wrapper">
  <span class="prev-slide col-md-1 col-sm-1 col-xs-1"/>
  <ul class="tab-container row col-md-10">
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 1</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 2</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 3</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 4</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 5</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 6</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 7</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 8</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 9</li>
   <li class="col-md-1 col-sm-1 col-xs-1">Slide 10</li>

  </ul><span class="next-slide col-md-1 col-sm-1 col-xs-1">></span>
 </div>
Comments