A responsive div is getting way to long height using bootstrap

Question

I have a web that shown 4 bar charts, using Chartist, on one row. I am trying to use the responsive solution of Bootstrap to shown the 4 charts one below the other but the chart div's are getting way to long on height when I visit the page on my iphone 6. Oddly when I modify the windows size, of Chrome browser, works like a charm.

This is my web: http://clipping.primerahora.cl/

This is the html part in question:

<div class="container">
    <div class="row">
            <div style="display:table; margin:0 auto;">
                <div id="chart-01" class="col-md-3 ct-chart01 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Tipo de Prensa</div>
                <div id="chart-02" class="col-md-3 ct-chart02 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Medios mas vistos</div>
                <div id="chart-03" class="col-md-3 ct-chart03 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Regiones</div>
                <div id="chart-04" class="col-md-3 ct-chart04 d1" style="display:table; margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Productos</div>   
            </div>
        </div>
</div>

I tried to use some media queries without luck:

@media screen and (min-width: 1024px) {
.d1{
    max-height:50%;
    height:50%;
  }
}      

@media screen and (max-width: 800px) {
.d1{
    max-height:50%;
    height:50%;
   }
}

@media screen and (max-width: 600px) {
.d1{
    max-height:50%;
    height:50%;
   }
}

Answer 1

Change your html to,

<div class="container">
    <div class="row">
         <div id="chart-01" class="col-md-3 ct-chart01 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Tipo de Prensa</div>
         <div id="chart-02" class="col-md-3 ct-chart02 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Medios mas vistos</div>
         <div id="chart-03" class="col-md-3 ct-chart03 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Regiones</div>
         <div id="chart-04" class="col-md-3 ct-chart04 d1" style="margin:0 auto; width:22%; height:50%; max-height: 50%; margin:5px; background-color: white; font-family: arial; font-stretch: condensed; text-align: center;">Productos</div>   
    </div>
</div>

Further you can improve it as,

CSS,

.d1 {
   height: 175px;
}

.chart-wrapper {
   height:100%;
   background-color: white;
   font-family: arial; font-stretch: condensed;
   text-align: center;
}

HTML,

<div class="container">
    <div class="row">
         <div class="col-md-3 d1"><div id="chart-01" class="chart-wrapper ct-chart01">Tipo de Prensa</div></div>
         <div class="col-md-3 d1"><div id="chart-02" class="chart-wrapper ct-chart02">Medios mas vistos</div></div>
         <div class="col-md-3 d1"><div id="chart-03" class="chart-wrapper ct-chart03">Regiones</div></div>
         <div class="col-md-3 d1"><div id="chart-04" class="chart-wrapper ct-chart04">Productos</div></div>   
    </div>
</div>