Buenas tengo una web terminada, la he probado en navegadores y en diferentes emuladores y todo funcionaba bien, pero al verla en iphone y ipad me he dado cuenta que la galeria responsive no me funciona! alguna idea?
<html>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
.......
<div class="gallery">
<div><img src="images/comida2/food1.jpg" alt></div>
<div><img src="images/comida2/food2.jpg" alt></div>
<div><img src="images/comida2/food3.jpg" alt></div>
<div><img src="images/comida2/food4.jpg" alt></div>
<div><img src="images/comida2/food5.jpg" alt></div>
</div>
<div class="gallery2">
<div><img src="images/comida2/food6.jpg" alt></div>
<div><img src="images/comida2/food7.jpg" alt></div>
<div><img src="images/comida2/food8.jpg" alt></div>
<div><img src="images/comida2/food9.jpg" alt></div>
<div><img src="images/comida2/food10.jpg" alt></div>
</div>
<css>
.gallery {
padding: 0 0 0 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
padding: .5vw;
}
.gallery div {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 250px;
}
.gallery div img {
width: 100%;
height: auto;
}
@media screen and (max-width: 400px) {
.gallery div { margin: 0; }
.gallery { padding: 0; }
}
.gallery2 {
margin-top:-13px;
padding: 0 0 0 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
padding: .5vw;
}
.gallery2 div {
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
width: 250px;
}
.gallery2 div img {
width: 100%;
height: auto;
}
@media screen and (max-width: 400px) {
.gallery2 div { margin: 0; }
.gallery2 { padding: 0; }
}
Muchas gracias
