CODEWITHSUNDEEP
htmlcss
Bobbie
Bobbie

Reputation: 57

How can i make the thumbnail title also responsive?

I would like to make these thumbnails smaller and a bit more close together in the middle of the page, I managed to do that but even though the thumbnails remain responsive, the title container is not, and stays the same size when i shrink and enlarge the page.The code as it is right now works perfectly but all goes downhill when i want to make the thumbnails smaller and more close together.

Can anyone help me make the text be responsive aswell?

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  background: rgb(255, 255, 255);
  padding: 20px;
}

.box>img {
  width: 100%;
  display: block;
  background-color: cornflowerblue;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
}

.box:hover {
  transform: scale(1.04);
}

.box .title {
  background: #ddd;
  padding: 0.5rem 1rem;
  text-align: center;
  width: -webkit-fill-available;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
<!DOCTYPE html>
<html>

  <body>
    <div class="container">
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
    </div>
  </body>

</html>

Upvotes: 2

Views: 62

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28573

I think the main issue is your padding on the image title. If you reduce the width of the image, then you will have to set the width of the title to calculate the percentage width minus the padding - that should do the trick.

In the below example, I've set your image to 50% width and reduced the padding from 1rem left and right to 0.5rem left/right on your title. Then I set the width of the title to calc(50%-1rem) (if i'd left the padding at 1rem, it'd have been -2rem etc). I also halved (roughly) your grid minmax from 230 to 110.

The image title fits below the picture now, it does wrap obviously because it's half the size, but the text length would vary depending on what the title was though.

Hope this is what you are looking for!

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  background: rgb(255, 255, 255);
  padding: 20px;
}

.box>img {
  width: 50%;
  display: block;
  background-color: cornflowerblue;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

.box:hover {
  transform: scale(1.04);
}

.title {
  background: #ddd;
  padding: 0.5rem 0.5rem;
  text-align: center;
  width: calc(50% - 1rem);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
<!DOCTYPE html>
<html>

  <body>
    <div class="container">
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
      <div class="box">
        <img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
        <div class="title">
          <span>Image Title</span>
        </div>
      </div>
    </div>
  </body>

</html>

Upvotes: 1

Related Questions