0

Estou ajustando a versão mobile de uma página, utilizando o bootstrap eu defini minhas divs com as classes col-md-4 (versão desktop) col-xs-6 (versão mobile). Na versão desktop está funcionando normal com três colunas como preciso, já na versão mobile (de duas colunas) as divs estão sendo sobre postas umas pelas outras. Versão Desktop

Versão Mobile

O código está mais ou menos assim:

.blocos
          {
            width: 100%;
            height: 100%;
            .icone
            {
              margin-top: 20%;
              @media screen and (max-width: $smartphone)
              {
                width: 80px;
                display: block;
                float: none;
                margin-left: auto;
                margin-right: auto;
                margin-top: 0;
                img
                {
                  margin-top: 30%;
                }
              }
            }
.col-xs-6
          {
            @media screen and (max-width: $smartphone)
            {
              height: 200px;
              margin-top: 0;
              margin-bottom: 15px;
              top: 0;
            }
          }
          .col-md-4
          {
            background-position: top center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 500px;
            margin-top: 30px;
            max-width: 425px;
            @media screen and (max-width: $smartphone)
            {
              height: 200px;
            }
          }
          .middle
          {
            margin-left: 35px;
            @media screen and (max-width: $smartphone)
            {
              margin-left: 0;
            }
          }
          .right
          {
            float:right;
            @media screen and (max-width: $smartphone)
            {
              float: none;
            }
          }
<div class="row blocos">
  <div class="col-md-4 col-xs-6">
    <!--Conteudo.....-->
  </div>
  <div class="col-md-4 col-xs-6">
    <!--Conteudo.....-->
  </div>
  <div class="col-md-4 col-xs-6">
    <!--Conteudo.....-->
  </div>
  <div class="col-md-4 col-xs-6">
    <!--Conteudo.....-->
  </div>
</div>

1 Resposta 1

0

Basicamente, errei desde o início, tive um trabalho árduo para fazer manualmente o que o CSS3 faz automaticamente!

Recomendo este artigo: http://desenvolvimentoparaweb.com/css/flexbox/

O uso de FlexBox facilita, e muito, na hora de montar um layout responsivo!

1
  • 2
    fique atento a compatibilidade das flexbox, para mim é o melhor método de desenvolvimento de layout, mas deixa a desejar em compatibilidade, por isso uso ele junto com angular material que fornece elas como diretivas sem se preocupar com prefixagem entre navegadores 21/07/2017 às 19:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .