This flex-wrap: wrap
code works in Firefox (both laptop and mobile) but not in Chrome (when the browser's resized to small) or non-Firefox mobile browsers.
In Firefox, on a large viewport (e.g., a laptop) the images (which are all .png
) appear side by side; and on a small viewport (e.g., a mobile phone) the images stack. In Chrome (both when a laptop browser is sized to small and on a mobile), the images move closer and closer together and then overlap each other (and butt up to the right-hand side of the screen.
Screenshot of images overlapping on Chrome
What have I done wrong?
NB: the head
contains <meta name="viewport" content="width=device-width, initial-scale=1">
.container {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding-left: 6%;
padding-right: 6%;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
img { width: 100%;
height: 100%;
}
.logo_box {
margin: 2vh 2vw;
align-items: baseline;
}
.logo_box img {
display: block;
max-width: 15vw;
min-width: 150px;
flex-basis: 150px;
height: auto;
width: auto;
margin: 2vw;
}
.align-items_center {
align-items: center;
}
<div class="container">
<div class="gallery align-items_center">
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 1">
</div>
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 2">
</div>
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 3">
</div>
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 4">
</div>
</div>
</div>