Edely Gomes Edely Gomes - 4 months ago 14
HTML Question

Bootstrap columns display different in Firefox

I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox.

I created ten boxes distributed in two rows. Five in each row. These boxes has classes

.col-sm-2
and
.col-xs-10
, besides a class called
.categoria
.

<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>


</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>

</div>


In Chrome, Opera and Safari, they appear correctly:

Screenshoot from Chrome

But in Firefox, it is completely irregular.

Screeshoot from Firefox

Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:

$(document).ready( function(){

var columnWidth = $('.categoria').innerWidth();

$('.categoria').css('max-height', columnWidth);

});


And here is the css:

.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}

.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}

.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}


@media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}

.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}

.categoria img{
display: none;
}

}
.col-xs-offset-1{
padding-left: 15px;
}


To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.

Answer

Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights

CSS:

.categoria{
    transition: background-color 0.5s linear, box-shadow 0.5s linear;
    background-color: #76C6C5;
    height: 140px;
    margin-left: 1%;
    margin-right:1%;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    display: block;
}

.categoria img{
    padding-top: 15%;
    height: 50%;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.categoria.col-sm-2 > p{
    font-size: 14px;
    padding-top: 10px;    
}


@media(max-width: 768px){
    .categoria{
        vertical-align: middle;
        height: 8em;
        display:table;
    }

    .categoria.col-sm-2 > p{
        font-size: 1.5em;
        display: table-cell;
        vertical-align: middle;
    }

    .categoria img{
        display: none;
    }

}
.col-xs-offset-1{
    padding-left: 15px;
}

HTML :

<div class="container categorias">
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
                    <p>Novidades</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
                    <p>Contribua</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
                    <p>Sua Nota é Um Show</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
                    <p>Parceiros</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
                    <p>Projetos</p>
                </div>


            </div>
        </div>
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
                    <p>Histórico</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
                    <p>Objetivo, Missão, <br> Valores</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
                    <p>Balancetes</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
                    <p>Diretoria</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
                    <p>Estatuto</p>
                </div>
            </div>
        </div>

    </div>

Fiddle

Comments