make div's down when changing screen resolution

Question

make div's down when changing screen resolution

Navigation

#1 by (0 votes)
#2 by (0 votes)

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 you change the resolução da tela to below 320px then the div's are one below the other.

But this is not happening unless I put display: inline . But then I lose the block conditions.

Where am I going wrong?

css css3

asked by anonymous 21.10.2016 / 14:04

2 answers

Add the variables with the date field equal if possible by editing the date column JQuery onclick and focusout

score 0 · Answer 1

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

How about inline-block , then?

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

score 0 · Answer 2

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>