Div does not appear correctly on differentiated devices

Asked

Viewed 37 times

0

I have the following div:

    <div class="row">
       <div class="col-lg-4 mb-4">    
  <div class="row">    
      <div class="col-lg-12 col-md-12 text-center"><img src="imagens/interprete.jpg" class="img-responsive"></div>
  </div>
  <div class="row">
    <div class="col-lg-12  col-md-12">
        <div class="row">
          <div class="col-md-7 col-sm-7 text-center texto-descricao">
              <span class="titulo-conteudo">DIRETAMENTE DO BOREL</span><br>
              <span class="texto-conteudo">Wantuir foi escolhido o Melhor Intérprete do Grupo Especial e fatura Prêmio S@amba-Net 2019</span>
          </div>
        </div> 
    </div>
  </div>
</div>

<div class="col-lg-4 mb-4">    
  <div class="row">    
      <div class="col-lg-12 col-md-12 text-center"><img src="imagens/interprete.jpg" class="img-responsive"></div>
  </div>
  <div class="row">
    <div class="col-lg-12  col-md-12">
        <div class="row">
          <div class="col-md-7 col-sm-7 text-center texto-descricao">
              <span class="titulo-conteudo">DIRETAMENTE DO BOREL</span><br>
              <span class="texto-conteudo">Wantuir foi escolhido o Melhor Intérprete do Grupo Especial e fatura Prêmio S@amba-Net 2019</span>
          </div>
        </div> 
    </div>
  </div>
</div>
<div class="col-lg-4 mb-4">    
  <div class="row">    
      <div class="col-lg-12 col-md-12 text-center"><img src="imagens/interprete.jpg" class="img-responsive"></div>
  </div>
  <div class="row">
    <div class="col-lg-12  col-md-12">
        <div class="row">
          <div class="col-md-7 col-sm-7 text-center texto-descricao">
              <span class="titulo-conteudo">DIRETAMENTE DO BOREL</span><br>
              <span class="texto-conteudo">Wantuir foi escolhido o Melhor Intérprete do Grupo Especial e fatura Prêmio S@amba-Net 2019</span>
          </div>
        </div> 
    </div>
  </div>
</div>

</div>

But when I see this div on the Moto G3 smartphone and another Samsung Galaxy J4+ with the larger screen, this div appears in different positions. I’ve tried to adjust it this way:

.texto-descricao{
    margin-top: -50px;
    margin-left: 13%; 
    background-color: #FFD400; 
    padding: 10px
}
@media only screen and (max-width: 540px) {
    .texto-descricao{
        margin-top: -50px;
        width: 300px;     
        margin-left:30%;   
        background-color: #FFD400; 
        padding: 10px
    }
}
@media only screen and (max-width: 600px) {
    .texto-descricao{
        margin-top: -50px;
        width: 300px;     
        margin-left:30%;   
        background-color: #FFD400; 
        padding: 10px
    }
}

But it didn’t work, only on max-width: 600px has taken effect on both. How can I make div appear in the same position regardless of the device? px, but it didn’t work either!

css
  • 1

    Dude this your grid is very strange, you should not go putting a col inside the other like you did, you can even do row>col>row>col but not col>col>col one col has to be the daughter of a row.... before thinking about doing this @media, maybe you should review this grid

  • Hello Hugo. Right. I made the adjustment, but it’s still giving this incompatibility. The main row has 03 columns and within each column I did what you suggested.

1 answer

1


The classes of Bootstrap col, col-sm, col-md etc., are classes to assist in a responsive design of your application. These are probably the ones that make your div’s position different in the devices you tested.

I didn’t get to see the resolution of the devices you mentioned, but in the div you assigned col-sm-7 for example, if the device with larger screen enters the category sm and your smallest device enter the category xs, the layout of the elements will be different since the value default of the smaller screens is the col-xs-12 (from Bootstrap 4 to col-xs-* no longer used, now only uses col-*).

If you want your Ivs to appear in the same position regardless of whether it’s a mobile device or a desktop, just set it to the smaller size, in this case the col-xs or col depending on the Bootstrap version.

Following is the link from an OS thread that explains this part of the columns and the sizes in Bootstrap: https://stackoverflow.com/a/41795300/7380348

  • Right Livio. Thanks for the tips.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.