0

I am trying to create a responsive image gallery via flex-box. I have 4 images in each container and there are 4 containers like this. So with normal view-port, it's running fine with 4 rows and 4 columns. But the problem arises when my screen range is in between 671-880 px. Here I am trying to make it a 3-column based gallery and its happening, but the 4th column which goes to bottom making a mess. It's not properly aligning.

Please have a look at my code and let me know how to modify it.

Also any suggestions to improve the code would be better.

PS: I have mentioned a comment line in css so that everyone can identify the problem part easily.

image

*{
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    background: #f1f1f1;
    padding: 16px 32px;
    text-align: center;
    text-decoration-line: underline;
    vertical-align: middle;
}

.photos{
    margin-top: 5px;
    display: flex;
    flex-flow: row wrap;
    padding: 2px 8px;
    #justify-content: center;
    width: 100%;
}


.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
    flex-grow: 1;
    display: flex;
    
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img,.photos-col-4 img{
    flex-grow: 1;
    padding: 4px 4px;
    margin: 2px 2px;
}

@media screen and (max-width:1100px){
    .photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
        flex-flow: column wrap;
    }
    
}


/* Problem Ocurrs here for 4th column...Scroll down in browser to see the 4th column in view-port range 671-880px*/
@media screen and (max-width:880px) and (min-width:671px){
    
    .photos-col-1,.photos-col-2,.photos-col-3{
        flex-flow: column wrap;
        width: 33%;
        flex:0 1;
        margin: 0 auto;
    }
    .photos-col-4{
        flex-flow: row wrap;
        padding: 0 32px;
        width: 100%;
        
    }
    .photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
        flex: 0 1;
        padding: 4px 4px;
        margin: 2px 2px;
        text-align: center
    }
    .photos-col-4 img{
        padding: 0 20px;
        
    }
    
}

@media screen and (max-width:670px) and (min-width:451px){
    
    .photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
        flex-flow: column wrap;
        width: 50%;
        flex:0 1;
        margin: 0 auto;
    }
    .photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
        flex: 0 1;
    }
}

@media screen and (max-width:450px){
    
    .photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
        flex-flow: column wrap;
        width: 100%;
        flex:0 1;
        margin: 0 auto;
    }
    .photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
        flex: 0 1;
    }
}
<!DOCTYPE html>
<html lang="">

<head>
 <meta charset="utf-8">
 <title>Example Title</title>
 <meta name="author" content="Your Name">
 <meta name="description" content="Example description">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <link rel="icon" type="image/x-icon" href=""/>
</head>

<body>
 <header>
        <h1>Responsive Image Grid</h1>
    </header>
 
    <main>
        
        <!-- Photo Grid -->
        <section class="photos">
            <section class="photos-col-1 row">
                <img src="https://picsum.photos/200/300?random=1">
                <img src="https://picsum.photos/200/300?random=2">
                <img src="https://picsum.photos/200/300?random=3">
                <img src="https://picsum.photos/200/300?random=4">
            </section>
            
            <section class="photos-col-2 row">
                <img src="https://picsum.photos/200/300?random=25">
                <img src="https://picsum.photos/200/300?random=24">
                <img src="https://picsum.photos/200/300?random=23">
                <img src="https://picsum.photos/200/300?random=22">
            </section>
        
            <section class="photos-col-3 row">
                <img src="https://picsum.photos/200/300?random=14">
                <img src="https://picsum.photos/200/300?random=13">
                <img src="https://picsum.photos/200/300?random=15">
                <img src="https://picsum.photos/200/300?random=12">
             </section>
            
            <section class="photos-col-4 row">
                <img src="https://picsum.photos/200/300?random=6">
                <img src="https://picsum.photos/200/300?random=7">
                <img src="https://picsum.photos/200/300?random=8">
                <img src="https://picsum.photos/200/300?random=9">
            </section>
            
        </section>
    </main>
 <footer></footer>
 <script type="text/javascript" src=""></script>
</body>

</html>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
teddcp
  • 1,514
  • 2
  • 11
  • 25

2 Answers2

2

First of all, I think the HTML code is wrong, because you wrap four photos in a section and then want to 'kick out' one of the photos. They supposed to be divided to two or one, not three.

And the class naming system is not good enough (How can 'col' and 'row' class on the same element?). It makes the CSS code messy. Based on my experiences, codes like that will be hard to maintain and causing 'weird' problems that hard to explain.

So, instead of fixes your code, I made a redesign of your code. Hope can solve your problem and give some insight.

HTML code (put inside body tag):

<header>
   <h1>Responsive Image Grid</h1>
</header>

<main>     
   <!-- Photo Grid -->
   <section class="photos">
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>

      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>

      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>

      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
      <div class="photo" style="background-image: url('https://picsum.photos/200/300?random=1')"></div>
    </section>
 </main>

CSS code:

:root {
  /* distance between images */
  --gap: 15px;
}

* {
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background: #f1f1f1;
    padding: 16px 32px;
    text-align: center;
    text-decoration-line: underline;
    vertical-align: middle;
}

/* For mobile: */
.photos {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-left: calc(var(--gap) * -1);
}

.photo {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   min-width: calc(50% - var(--gap));
   height: 300px;
   margin-left: var(--gap);
   margin-bottom: var(--gap);
 }

 /* For mobile and up: */
 @media (min-width: 600px) {
   .photo {
      min-width: calc(33.33% - var(--gap));
   }
 }

 /* For tablet and up: */
 @media (min-width: 900px) {
   .photo {
      min-width: calc(25% - var(--gap));
   }
 }

CMIIW

Faris Han
  • 525
  • 3
  • 16
0

Please check this code. I think this is your requirement.

 *{
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    background: #f1f1f1;
    padding: 16px 32px;
    text-align: center;
    text-decoration-line: underline;
    vertical-align: middle;
}

.photos{
    margin-top: 5px;
    display: flex;
    flex-flow: row wrap;
    padding: 2px 8px;
    justify-content: center;
    width: 100%;
}


.photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
    flex-grow: 1;
    display: flex;
}
.photos-col-1 img,.photos-col-2 img,.photos-col-3 img,.photos-col-4 img{
   flex-grow: 1;
   padding: 4px 4px;
     margin: 2px 2px;
}

@media screen and (max-width:1100px){
    .photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
        flex-flow: column wrap;
    }

}


/* Problem occurs here for 4th column...Scroll down in browser to see the 4th column in view-port range 671-880px*/
@media screen and (max-width:880px) and (min-width:671px){

    .photos-col-1,.photos-col-2,.photos-col-3{
        flex-flow: column wrap;
    }
    .photos-col-4{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    }
    .photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
        padding: 4px 4px;
    }
    .photos-col-4 img{
        padding: 4px 4px;
        width: calc(33.3% - 0px);
      width: calc(33.3% - 0px);
    flex-grow: initial;
    margin: 0;
    }

}

@media screen and (max-width:670px) and (min-width:451px){

    .photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
        flex-flow: column wrap;
        width: 50%;
        margin: 0 auto;
    }
    .photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
        flex: 0 1;
    }
}

@media screen and (max-width:450px){

    .photos-col-1,.photos-col-2,.photos-col-3,.photos-col-4{
        flex-flow: column wrap;
        width: 100%;
        flex:0 1;
        margin: 0 auto;
    }
    .photos-col-1 img,.photos-col-2 img,.photos-col-3 img ,.photos-col-4 img{
        flex: 0 1;
    }
}
<!DOCTYPE html>
<html lang="">

<head>
 <meta charset="utf-8">
 <title>Example Title</title>
 <meta name="author" content="Your Name">
 <meta name="description" content="Example description">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <link rel="icon" type="image/x-icon" href=""/>
</head>

<body>
 <header>
        <h1>Responsive Image Grid</h1>
    </header>
 
    <main>
        
        <!-- Photo Grid -->
        <section class="photos">
            <section class="photos-col-1 row">
                <img src="https://picsum.photos/200/300?random=1">
                <img src="https://picsum.photos/200/300?random=2">
                <img src="https://picsum.photos/200/300?random=3">
                <img src="https://picsum.photos/200/300?random=4">
            </section>
            
            <section class="photos-col-2 row">
                <img src="https://picsum.photos/200/300?random=25">
                <img src="https://picsum.photos/200/300?random=24">
                <img src="https://picsum.photos/200/300?random=23">
                <img src="https://picsum.photos/200/300?random=22">
            </section>
        
            <section class="photos-col-3 row">
                <img src="https://picsum.photos/200/300?random=14">
                <img src="https://picsum.photos/200/300?random=13">
                <img src="https://picsum.photos/200/300?random=15">
                <img src="https://picsum.photos/200/300?random=12">
             </section>
            
            <section class="photos-col-4 row">
                <img src="https://picsum.photos/200/300?random=6">
                <img src="https://picsum.photos/200/300?random=7">
                <img src="https://picsum.photos/200/300?random=8">
                <img src="https://picsum.photos/200/300?random=9">
            </section>
            
        </section>
    </main>
 <footer></footer>
 <script type="text/javascript" src=""></script>
</body>

</html>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Praveen
  • 985
  • 8
  • 31