11 replies

Weird gallery display on iPhone 14

I have a gallery of photos for an art school website. The gallery is a div with a flex-row-wrap display. Each image is contained in it's own div with a fixed height, a width of fit-content and a display of flex (centered).

When I use emulators to look at this on different devices, the gallery looks normal, but I was sent a screenshot of some weird behavior on iPhone 14. It seems the div containing the image stretches to fill the screen, instead of fitting the content.

CODE:
HTML

<div id="gallery">
  <div class="painting">
    <img>
  </div>
</div>

<div id="gallery">
  <div class="painting">
    <img>
  </div>
</div>

CSS

#gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.painting {
  width: fit-content;
  height: 18rem;
  display: flex;
  justify-content: center;
  position: relative;
  border: 0.15rem solid black;
  border-radius: 0.6rem;
}

#gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.painting {
  width: fit-content;
  height: 18rem;
  display: flex;
  justify-content: center;
  position: relative;
  border: 0.15rem solid black;
  border-radius: 0.6rem;
}

The relative positioning is to facilitate an overlay div that contains icons (but that is not being used in the current version of the site.

I've attached images of the iPhone 14 screenshot of the problem vs a screenshot of the gallery as appears on Chrome's developer tools for iPhone 14 Pro Max.

Does anyone see what I've done wrong?

WhatsApp_Image_2023-12-12_at_11.10.24.jpeg

KP-C

Kevin Powell - Community•3y ago•

11 replies

butterfly0408

Weird gallery display on iPhone 14

<div id="gallery">
  <div class="painting">
    <img>
  </div>
</div>

<div id="gallery">
  <div class="painting">
    <img>
  </div>
</div>

CSS

#gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.painting {
  width: fit-content;
  height: 18rem;
  display: flex;
  justify-content: center;
  position: relative;
  border: 0.15rem solid black;
  border-radius: 0.6rem;
}

#gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.painting {
  width: fit-content;
  height: 18rem;
  display: flex;
  justify-content: center;
  position: relative;
  border: 0.15rem solid black;
  border-radius: 0.6rem;
}

Weird gallery display on iPhone 14

Similar Threads

Weird gallery display on iPhone 14

Similar Threads

Similar Threads

Similar Threads