CODEWITHSUNDEEP
htmlcssflexboxresponsive
Biebk
Biebk

Reputation: 161

Stuck in flexbox! making responsive image gallery

I have images of different width and height. And I am trying to make responsive image gallery. I am only able to create responsive image gallery if I first make all the images of same dimension using online-tool. But I don't want to do that. That's not a good way to do that, I think. I have created these two code snippets. I want my media query breakpoints at 860px, 640px.These break points are must.

CODE SNIPPET 1ST

Every things is as I wanted except image heights. I want them to be equal without affecting other things. I have created another code snippets to take of that height, but now it is messing everything around. See second code snippet after you review this one.

.container {
  background: rgb(69, 86, 125);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
  
}
.img-wrapper {
 margin: 20px 10px;
  width: 30%;
  
  border: 2px solid red;
  display: inline-block;
}
.img-wrapper p {
  text-align: center;
  font-size: 30px;
  background: lightblue;
  margin: 0;
  padding: 10px;
  font-family: cursive;
  margin-top: -3px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}
@media screen and (max-width: 860px)
{
  .container {
    background-color: yellowgreen;
  }
  .img-wrapper {
    width: 45%;
  }
}
@media screen and (max-width: 640px)
{
  .container {
    background-color: #1f996a;
    
  }
  .img-wrapper {
    width: 100%;
  }
}
<div class="container">
  <div class="img-wrapper">
    <img src="https://lh3.googleusercontent.com/proxy/mUUnWsw1UC_5YLXBC5OT5-Sgt5B_j_AhOeyv1zDRlfe3rwrjuuT3NoS1rdqIU_LA896JGqdaiQIUfb_EQw10MRl4QE-uT5vS79uqy58XrcP-7BW622XXdg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  <div class="img-wrapper">
    <img src="http://www.eso.org/public/archives/images/screen/8k-4k-hd_comparison.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  <div class="img-wrapper">
    <img src="https://www.wallpapertip.com/wmimgs/11-118446_nice-wallpapers-15-bb-q5.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
   <div class="img-wrapper">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTs8Kf7l4F4FYhMh7O9eOLX3ny5RBdIdn3ckmEIjleiOo9BEU47Lmpia5XVkUipxGjfIHY&usqp=CAU" alt="">
    <p>Lorem Ipsum</p>
  </div>
  <div class="img-wrapper">
    <img src="https://st1.bollywoodlife.com/wp-content/uploads/2021/06/FotoJet-2021-06-06T215523.686.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  <div class="img-wrapper">
    <img src="https://i.pinimg.com/736x/a9/df/32/a9df3251b065a7593481c886601f2895.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  
</div>

CODE SNIPPET SECOND

Now I have created images to be same height which I wanted, but now it is messing with responsiveness. Since they are now of fixed rigid pixel, they are not shrinking as in code snippet first. Help me !

.container {
  background: rgb(69, 86, 125);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
  
}
.wrapper {
  margin: 20px 10px;
}
.img-wrapper {
 
  width: 400px;
  height: 400px;
  
  border: 2px solid red;
  display: inline-block;
}
.img-wrapper p {
  text-align: center;
  font-size: 30px;
  background: lightblue;
  margin: 0;
  padding: 10px;
  font-family: cursive;
  margin-top: -3px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

@media screen and (max-width: 860px)
{
  .container {
    background-color: yellowgreen;
  }
  .wrapper {
    width: 45%;
  }
}
@media screen and (max-width: 640px)
{
  .container {
    background-color: #1f996a;
    
  }
  .wrapper {
    width: 100%;
  }
}
<div class="container">
  <div class="wrapper">
    <div class="img-wrapper">
    <img src="https://lh3.googleusercontent.com/proxy/mUUnWsw1UC_5YLXBC5OT5-Sgt5B_j_AhOeyv1zDRlfe3rwrjuuT3NoS1rdqIU_LA896JGqdaiQIUfb_EQw10MRl4QE-uT5vS79uqy58XrcP-7BW622XXdg" alt="">
    <p>Lorem Ipsum</p>
  </div>    
  </div>
  <div class="wrapper">
    <div class="img-wrapper">
    <img src="http://www.eso.org/public/archives/images/screen/8k-4k-hd_comparison.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  </div>
  <div class="wrapper">
     <div class="img-wrapper">
    <img src="https://www.wallpapertip.com/wmimgs/11-118446_nice-wallpapers-15-bb-q5.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  </div>
  <div class="wrapper">
    <div class="img-wrapper">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTs8Kf7l4F4FYhMh7O9eOLX3ny5RBdIdn3ckmEIjleiOo9BEU47Lmpia5XVkUipxGjfIHY&usqp=CAU" alt="">
    <p>Lorem Ipsum</p>
  </div>
  </div>
  <div class="wrapper">
     <div class="img-wrapper">
    <img src="https://st1.bollywoodlife.com/wp-content/uploads/2021/06/FotoJet-2021-06-06T215523.686.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  </div>
  <div class="wrapper">
     <div class="img-wrapper">
    <img src="https://i.pinimg.com/736x/a9/df/32/a9df3251b065a7593481c886601f2895.jpg" alt="">
    <p>Lorem Ipsum</p>
  </div>
  </div>
</div>

Upvotes: 1

Views: 332

Answers (1)

Anton
Anton

Reputation: 8508

I used your media query for 640px screen, but changed .wrapper class to .img-wrapper. Now it's responsive on mobile.

.container {
  background: rgb(69, 86, 125);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.img-wrapper {
  margin: 20px 10px;
  width: 30%;
  height: 400px; /* New line */

  border: 2px solid red;
  display: inline-block;
}
.img-wrapper p {
  text-align: center;
  font-size: 30px;
  background: lightblue;
  margin: 0;
  padding: 10px;
  font-family: cursive;
  margin-top: -3px;
}
img {
  width: 100%;
  height: calc(100% - 62px); /* Edited line */
  object-fit: cover;
}
@media screen and (max-width: 860px) {
  .container {
    background-color: yellowgreen;
  }
  .img-wrapper {
    width: 45%;
  }
}
@media screen and (max-width: 640px) {
  .container {
    background-color: #1f996a;
  }
  .img-wrapper {
    width: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="img-wrapper">
        <img
          src="https://lh3.googleusercontent.com/proxy/mUUnWsw1UC_5YLXBC5OT5-Sgt5B_j_AhOeyv1zDRlfe3rwrjuuT3NoS1rdqIU_LA896JGqdaiQIUfb_EQw10MRl4QE-uT5vS79uqy58XrcP-7BW622XXdg"
          alt=""
        />
        <p>Lorem Ipsum</p>
      </div>
      <div class="img-wrapper">
        <img
          src="http://www.eso.org/public/archives/images/screen/8k-4k-hd_comparison.jpg"
          alt=""
        />
        <p>Lorem Ipsum</p>
      </div>
      <div class="img-wrapper">
        <img
          src="https://www.wallpapertip.com/wmimgs/11-118446_nice-wallpapers-15-bb-q5.jpg"
          alt=""
        />
        <p>Lorem Ipsum</p>
      </div>
      <div class="img-wrapper">
        <img
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTs8Kf7l4F4FYhMh7O9eOLX3ny5RBdIdn3ckmEIjleiOo9BEU47Lmpia5XVkUipxGjfIHY&usqp=CAU"
          alt=""
        />
        <p>Lorem Ipsum</p>
      </div>
      <div class="img-wrapper">
        <img
          src="https://st1.bollywoodlife.com/wp-content/uploads/2021/06/FotoJet-2021-06-06T215523.686.jpg"
          alt=""
        />
        <p>Lorem Ipsum</p>
      </div>
      <div class="img-wrapper">
        <img
          src="https://i.pinimg.com/736x/a9/df/32/a9df3251b065a7593481c886601f2895.jpg"
          alt=""
        />
        <p>Lorem Ipsum</p>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Upvotes: 1

Related Questions