Olá, tenho o seguinte código:
<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>
A ideia aqui é que quando alterar a resolução da tela
para abaixo de 320px
então as div's
fiquem uma abaixo da outra.
Mas isso não está acontecendo a menos que eu coloque display: inline
. Porem aí eu perco as condições de bloco.
Onde estou errando?