1

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>

2 Answers 2

0

Not really an explanation, seems like Chrome hardly recalculate size of each element on resize.

a different approach, turning margins into padding and min-width on img to its container seems less buggy for chrome:

.container {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 6%;
  padding-right: 6%;
  border: solid;
}

.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;/* ?? is this a flex box ?? */
  min-width: 150px;  /* added */
  padding: 2vw;  /* from img margin */
}

.logo_box img {
  display: block;
  max-width: 15vw;
  min-width: 100%;   /* fits to parent's min-width */
}

.align-items_center {
  align-items: center;
}
<div class="container">
  <div class="gallery align-items_center">
    <div class="logo_box">
      <img src="http://dummyimage.com/150" alt="Alt text 1">
    </div>
    <div class="logo_box">
      <img src="http://dummyimage.com/100" alt="Alt text 2">
    </div>
    <div class="logo_box">
      <img src="http://dummyimage.com/200" alt="Alt text 3">
    </div>
    <div class="logo_box">
      <img src="http://dummyimage.com/250" alt="Alt text 4">
    </div>
  </div>
</div>

0
0

The problem is the max-width: 15vw in the logo_box img declaration block.

For whatever reason, the vw is handled differently in Chrome and Firefox.

I would suggest using a different unit of length or removing the rule.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.