Images move off screen when shrunk in css

Question

Image of problemI'm attempting to make a responsive image gallery, and it works mostly except every time I shrink the screen below 420px the images get pushed off screen rather than resizing with the archive-main container.

.archive-image{
  width:100%;     
  display: block;
  height: auto;
  border: #000000 solid 2px;     
}
.archive-main{
  box-shadow: 0 0 20px 0 rgba(72, 94,116, 0.7);
  border-top:goldenrod double 4px ;
  border-left:goldenrod double 4px ;
  border-right:goldenrod double 4px ;
  background-color: #00000035;
  background-image: linear-gradient(147deg, #000000a7 0%, #434343 74%);
  display: grid;
  grid-template-columns :repeat(auto-fit, minmax(400px, 1fr));

}
.img-box{
  padding:10px;
}

<main class="archive-main">
    
<div class="img-box"><img class="archive-image gallery" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>

<div class="img-box"><img class="archive-image" src="/images/Gallery24.JPG"></div>
</main>

Does this answer your question? [Controlling the size of an image within a CSS Grid layout](https://stackoverflow.com/questions/46090760/controlling-the-size-of-an-image-within-a-css-grid-layout) — Mehdi Dehghani, Jul 12 '22 at 04:54

score 0 · Answer 1 · answered Jul 12 '22 at 05:12

Use this method.

.archive-image{
  width:100%;     
  display: block;
  height: auto;
  border: #000000 solid 2px;     
}
.archive-main{
  box-shadow: 0 0 20px 0 rgba(72, 94,116, 0.7);
  border-top:goldenrod double 4px ;
  border-left:goldenrod double 4px ;
  border-right:goldenrod double 4px ;
  background-color: #00000035;
  background-image: linear-gradient(147deg, #000000a7 0%, #434343 74%)
}
@media screen and (min-width: 420px) {
  .archive-main{
    box-shadow: 0 0 20px 0 rgba(72, 94,116, 0.7);
    border-top:goldenrod double 4px ;
    border-left:goldenrod double 4px ;
    border-right:goldenrod double 4px ;
    background-color: #00000035;
    background-image: linear-gradient(147deg, #000000a7 0%, #434343 74%);
    display: grid;
    grid-template-columns :repeat(auto-fit, minmax(400px, 1fr));
  }
}
.img-box{
  padding:10px;
}

<main class="archive-main">
    
<div class="img-box"><img class="archive-image gallery" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.jpg"></div>
<div class="img-box"><img class="archive-image" src="/images/Gallery.JPG"></div>

<div class="img-box"><img class="archive-image" src="/images/Gallery24.JPG"></div>
</main>

Images move off screen when shrunk in css

1 Answers1