Mr-RightHanded
Mr-RightHanded

Reputation: 7

Create a responsive flex image gallery

I'm a beginner and I've tried researching for a day or two now and I'm completely stuck.

I'm watching tutorials while I learn by myself and I can't seem to figure out how to make this responsive. Basically I want it to be a width:100%; on the css but still maintain that square cover thumbnail style. (take the full width of the browser/phone for smaller screens like instagram) Any help or if you could point me to the right direction would be greatly appreciated! Thanks

<style>
.gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo img {
    padding: 20 0px;
    object-fit: cover;
    /* pls ignore these 2 lines of code below
    I want it to take the full width of the
    browser/phone for smaller screens */
    width: 250px;
    height: 250px;
}
</style>

<div class="gallery">
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/29/13/34/dog-4661341__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/08/20/13/14/panda-4418773__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/18/44/coffee-beans-4668463__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/13/12/hair-4672683__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/09/30/brutal-4672229__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2015/05/31/11/18/table-791149__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/03/26/snow-4666831__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/23/07/24/christmas-4646421__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/25/09/00/exotic-4651348__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/10/10/22/15/norway-4540666__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/09/16/17/18/spa-4481538__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2018/03/29/11/59/snow-3272072__340.jpg"><a href="#"></a></div>
</div>

Upvotes: 0

Views: 648

Answers (4)

Ishan Shah
Ishan Shah

Reputation: 393

You should take a single row and then multiple columns into it and also you should use media query for responsiveness. I have put different CSS for different browsers. I have tried to code as per your requirement, which is as follows. Kindly refer to the same.

<!DOCTYPE html>
<html>
   <style>
   * {
     box-sizing: border-box;
   }

   body {
     margin: 0;
     font-family: Arial;
   }

   .header {
     text-align: center;
     padding: 32px;
   }

   .row {
     display: -ms-flexbox; /* IE10 */
     display: flex;
     -ms-flex-wrap: wrap; /* IE10 */
     flex-wrap: wrap;
     padding: 0 4px;
   }

   .column {
     -ms-flex: 25%; /* IE10 */
     flex: 25%;
     max-width: 25%;
     padding: 0 4px;
   }

   .column img {
     margin-top: 8px;
     vertical-align: middle;
     width: 100%;
   }

   @media screen and (max-width: 800px) {
     .column {
       -ms-flex: 50%;
       flex: 50%;
       max-width: 50%;
     }
   }

   @media screen and (max-width: 600px) {
     .column {
       -ms-flex: 100%;
       flex: 100%;
       max-width: 100%;
     }
   }
   </style>
<body>
   <div class="row"> 
     <div class="column">
       <img src="/w3images/wedding.jpg" style="width:100%">
       <img src="/w3images/rocks.jpg" style="width:100%">
       <img src="/w3images/falls2.jpg" style="width:100%">
       <img src="/w3images/paris.jpg" style="width:100%">
       <img src="/w3images/nature.jpg" style="width:100%">
       <img src="/w3images/mist.jpg" style="width:100%">
       <img src="/w3images/paris.jpg" style="width:100%">
     </div>
   </div>
</body>
</html>

Upvotes: 0

maryam
maryam

Reputation: 161

change your css file to:

.gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

It makes the content in the middle of the page and wrap your content when you make the page smaller.

Upvotes: 1

Himanshu Singh
Himanshu Singh

Reputation: 2165

Add the following css to your gallery class and it will evenly distribute your images evenly throughout the screen.

.gallery {    
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-evenly;
}

Demo:

.gallery {
    
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.photo img {
    padding: 20 0px;
    width: 150px;
    height: 150px;
    object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bougrine Shop - Home</title>
  <link rel="icon" href="img/Fevicon.png" type="image/png">
  <link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
  <link rel="stylesheet" href="vendors/nice-select/nice-select.css">
  <link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
  <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">

  <link rel="stylesheet" href="./text.css">
  <link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>

<body>
  <div class="gallery">
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/29/13/34/dog-4661341__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/08/20/13/14/panda-4418773__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/18/44/coffee-beans-4668463__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/13/12/hair-4672683__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/04/09/30/brutal-4672229__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2015/05/31/11/18/table-791149__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/12/02/03/26/snow-4666831__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/23/07/24/christmas-4646421__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/11/25/09/00/exotic-4651348__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/10/10/22/15/norway-4540666__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2019/09/16/17/18/spa-4481538__340.jpg"><a href="#"></a></div>
    <div class="photo"><img src="https://cdn.pixabay.com/photo/2018/03/29/11/59/snow-3272072__340.jpg"><a href="#"></a></div>
</div>
</body>

</html>

Upvotes: 0

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5556

You just need to update your CSS of .gallery to

.gallery {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

You can check out live working example here https://jsfiddle.net/7jdyev4a/1/

Upvotes: 1

Related Questions