div’s scroll down when changing screen resolution

Asked

Viewed 163 times

0

Hello, I have the following code:

<style>
.fotosJaCad {
    display:inline-block; 
    vertical-align: middle; 
    width: 18%; 
    height: 175px; 
    text-align:center;  
    border: #000 .01px solid;
}

@media screen and (min-width: 0px) and (max-width:320px)  {
  .fotosJaCad {
      display:inline; 
  }
}
</style>

<div class='fotosJaCad' />
  <input type='checkbox' name='fotosBanco[]' value='1' / ><br />
    <img class='elevate-image' 
         src='_img/_fotos/_normais/4aef2531a9b1a0e5e19ea81c15e8c33c.jpg'  
         style='max-width: 160px; max-height: 160px;' 
         alt='Foto'
         title='Foto' />
</div>

<div class='fotosJaCad' />
  <input type='checkbox' name='fotosBanco[]' value='1' / ><br />
    <img class='elevate-image' 
         src='_img/_fotos/_normais/b972db87bd864a4eb3ba640d3b16ad15.jpg'  
         style='max-width: 160px; max-height: 160px;' 
         alt='Foto'
         title='Foto' />
</div>

<div class='fotosJaCad' />
  <input type='checkbox' name='fotosBanco[]' value='1' / ><br />
    <img class='elevate-image' 
         src='_img/_fotos/_normais/7bc5b6f240a1d5c04d29edeb7b54535f.jpg'  
         style='max-width: 160px; max-height: 160px;' 
         alt='Foto'
         title='Foto' />
</div>

The idea here is that when I change the resolução da tela down 320px then the div's stay one below the other.

But this isn’t happening unless I put display: inline. But then I lose the block conditions.

Where am I going wrong?

css css3

2 answers

0

display: inline [...] then I lose block conditions

How about inline-block, then?

@media screen and (min-width: 0px) and (max-width:320px)  {
  .fotosJaCad {
      display:inline-block;
  }
}

  • display:inline-block; it is already so for values above 320px. But when I reduce the resolution then Divs are not below each other. They’re still next to each other.

  • I’m sorry, but I can’t comment on your question because I don’t have a 50-year reputation so I’m going to update that answer. There’s a way you can post a jsfiddle with your case for me to test?

  • I have answered below with the solution: but thank you for the strength.

0

Solution:

<style>
.fotosJaCad {
    display:inline-block; 
    vertical-align: middle; 
    width: 18%; 
    height: 175px; 
    text-align:center;  
    border: #000 .01px solid;
}

@media screen and (min-width: 0px) and (max-width:1000px)  {
  .fotosJaCad {
    display: block;
    width:90%;
    margin:3px auto; /*Separação entre os blocos*/
  }
}
</style>

Browser other questions tagged css css3

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