Div being superimposed by another

Navigation
0

I'm setting the mobile version of a page, using the bootstrap I set my divs with the col-md-4 (desktop version) col-xs-6 (mobile version) classes. In the desktop version is working normal with three columns as accurate, already in the mobile version (two columns) the divs are being overlaid with each other.

Thecodelookssomethinglikethis:

.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>
    
asked by anonymous 21.07.2017 / 20:23

1 answer

0

Basically, I was wrong from the start, I had a hard time doing what CSS3 does automatically!

I recommend this article: link

Using FlexBox makes it a lot easier to set up a responsive layout!

    
21.07.2017 / 21:38
Error converting type String to Integer in NodeJS SQL needs CAST to return values in query