Can anyone help to solve issue with flexbox responsivness?

HTML-CSS
1

I am on the way for making responsive image gallery using flexbox. For this, my structure of html is as follow:

<main class="image-container">
    <div class="image-wrapper">
        <img src="#">
    </div>
    <div class="image-wrapper">
        <img src="#">
    </div>
    ....so on many 
</main>

Following is my css snippet:

.image-container {
        width: 90%;
       height: 2480px;
        margin: 20px auto 0px;
        background: rgba(209, 217, 223, 0.705);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-evenly;
        align-content: space-evenly;
        position: relative;            
   }
  .image-wrapper {
       width: 30%;
       margin: 0px auto 8px;
       flex-shrink: 0;
   }
    img{
        width: 100%;  
        height: 100%;
   }

Now in order to make this responsive, I have to make use of media queries. Suppose my laptop screen width is 1280px. And I trying to get 3 columns of images into 2 column at 760px breakpoint . The problem is as I try to reduce screen size , suddenly at 1180px awkward space is generated from the last column. I get it, I have rigid container height as 2480px . Because of that, my height is maintained constant and as width is 90% image are being smaller and 3rd column image is being added into other column. I have tried my best, so any suggestions are welcomed. Is there something is could do in html or css? I am sorry if you are having trouble to understand the scenario.

Here is the complete code in codepen.io
You can simply copy and paste this code in your codepen or jsfiddle and if you have a better way of doing. Share me !

2

Your codepen.io link is to the main codepen website, not to your actual code. Try linking your code again to see if we can help out.

3

I am sorry, I was in hurry that day.
Here’s the link.

4

I looked at it and messed around with resizing my screen but found no issues. Maybe I’m not understanding what you are asking?

5

I am sorry brother, I had updated the css code. You can remove the first part of css which was helped by @irem. Below her code, there is mine css and that’s where the problem is .

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.