Text disappears on small screens

Question

I have created an image gallery with a css grid and added a caption below each image. This grid is fully responsive but I have one issue with this. The text below the image disappears or hide behind other images on small screens.

I want the caption to stay below the images on small screens as well. How can I fix this?

Here is the HTML and CSS code:

.container {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
}

.imageone {
  justify-content: center;
}

.desc {
  font-size: 30px;
  text-align: center;
}

.gallery {
  width: 300px;
  height: 200px;
  border: 2px solid #000;
}

.gallery img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.gallery:hover {
  border: 2px solid #ff00ff;
}

h1 {
  text-align: center;
  font-size: 40px;
}

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 1000px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 800px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 400px) {
  .container,
  .imageone {
    grid-template-columns: 1fr;
  }
}

<h1>Image Gallery</h1>

<div class="container">

  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="1.jpg"><img src="1.jpg"></a>
      <p class="desc">Image One</p>
    </div>
  </div>

  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="2.jpg"><img src="2.jpg"></a>
      <p class="desc">Image Tow</p>
    </div>
  </div>

  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="3.jpg"><img src="3.jpg"></a>
      <p class="desc">Image Three</p>
    </div>
  </div>

  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="4.jpg"><img src="4.jpg"></a>
      <p class="desc">Image Four</p>
    </div>
  </div>

</div>

Answer 1

Another solution is that:

If you don't want to use overflowing elements, you can seperate text and image block divs and then you can set width of parent div so text elements will remain on center.

.container {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
}

.imageone {
    justify-content: center;
    width: 300px;

}


.desc {
    font-size: 30px;
    text-align: center;
    margin:0px;
    }



.gallery {
    width: 300px;
    height: 200px;
    border: 2px solid #000;
}

.gallery img {
    width: 100%;
    height: 100%;
    vertical-align: middle;

}

.gallery:hover {
    border: 2px solid #ff00ff;
}

h1 {
    text-align: center;
    font-size: 40px;
}

* {
    box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .container, .imageone {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media only screen and  (max-width: 1000px) {
  .container, .imageone {
  grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 800px) {
  .container, .imageone  {
  grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 400px) {
  .container, .imageone {
  grid-template-columns: 1fr;
  }
}

<div class="container">
  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="1.jpg">
        <img src="1.jpg"></a>
    </div>
    <p class="desc">Image One</p>
  </div>
  <div class="imageone">
    <div class="gallery">
      <a target="_blank" href="2.jpg">
        <img src="2.jpg"></a>
    </div>
    <p class="desc">Image Tow</p>
  </div>
  <div class="imageone">

    <div class="gallery">
      <a target="_blank" href="3.jpg">
        <img src="3.jpg"></a>
    </div>
    <p class="desc">Image Three</p>
  </div>
  <div class="imageone">
    <div class="gallery">

      <a target="_blank" href="4.jpg">
        <img src="4.jpg"></a>
    </div>
    <p class="desc">Image Four</p>
  </div>
</div>

Answer 2

Your caption isnt dissapearing, it is going under the image, to solve this I would make some space on the breakpoints so you can let the text have some space.

@media only screen and (max-width: 800px) {
    .desc{
    margin: 0px;
  }
  .gallery {
    margin-bottom: 25px;
  }
}

Hope this helps :)

.container {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
}

.imageone {
  justify-content: center;
}

.desc {
  font-size: 30px;
  text-align: center;
}

.gallery {
  width: 300px;
  height: 200px;
  border: 2px solid #000;
}

.gallery img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.gallery:hover {
  border: 2px solid #ff00ff;
}

h1 {
  text-align: center;
  font-size: 40px;
}

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 1000px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media only screen and (max-width: 800px) {
  .container,
  .imageone {
    grid-template-columns: 1fr 1fr;
  }
    .desc{
    margin: 0px;
  }
  .gallery {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 400px) {
  .container,
  .imageone {
    grid-template-columns: 1fr;
  }
}

<h1>Image Gallery</h1>



<div class="container">

  <div class="imageone">

    <div class="gallery">
      <a target="_blank" href="1.jpg">
        <img src="1.jpg"></a>

      <p class="desc">Image One</p>

    </div>
  </div>

  <div class="imageone">


    <div class="gallery">
      <a target="_blank" href="2.jpg">
        <img src="2.jpg"></a>

      <p class="desc">Image Tow</p>
    </div>
  </div>

  <div class="imageone">

    <div class="gallery">
      <a target="_blank" href="3.jpg">
        <img src="3.jpg"></a>

      <p class="desc">Image Three</p>
    </div>
  </div>
  <div class="imageone">
    <div class="gallery">

      <a target="_blank" href="4.jpg">
        <img src="4.jpg"></a>

      <p class="desc">Image Four</p>



    </div>
  </div>
</div>

</body>

</html>