How can i make my img galery responsive?

HTML-CSS
1

I have he next problem (and i don’t know why my gallery is not responsive) [Codepen at the bottom]:

problem1
problem11001×421 723 KB

And then when i reduce the window this happend:

Problem2
Problem2479×689 203 KB

HERE MY CODEPEN: https://codepen.io/ricardonothing/pen/pozmqYO?editors=1100

2

The fixed height on .second-content makes its content overflow.

Both .card-grid and .meal are not responsive. They should really start stacking as the screen gets smaller.

BTW, if you just let something scale down like what you are doing with .meal, then it is adaptive, not really responsive.

3

try putting all of your images in different divs. for the top row, assign them to a div called “top-row” and likewise do to the bottom row(s). give them a margin of 1%, and give the div a width of however wide you want it. then finally assign each image a width of 24%.
You don’t need to do everything I gave you, but that’s just my way of making things responsive. Hope it helps.

4

can you copy and paste a quick example? and thanks!.

5

HTML:

<div class = "img-row" id = "top-row">
<img class = "image" src = "[...]">
<img class = "image" src = "[...]">
<img class = "image" src = "[...]">
<img class = "image" src = "[...]">
</div>

<div class = "img-row" id = "bottom-row">
<img class = "image" src = "[...]">
<img class = "image" src = "[...]">
<img class = "image" src = "[...]">
<img class = "image" src = "[...]">
</div>

css:

#top-row{
position:absolute;
top:[your input];
left:0%;
width:100%;
/*optional*/ height:[your input];
background:[your input];
}

#bottom-row{
position:absolute;
top:[your input];
left:0%;
width:100%;
/*optional*/ height:[your input];
background:[your input];
}
.image{
width:24%; /*24% of the parent div*/
margin:1%;
}

Try it first, and if it doesn’t work, I’ll try troubleshooting it.

6

I been trying with diferents settings and i doesn’t work.
Here my codepen with your code settings: https://codepen.io/ricardonothing/pen/pozmqYO?editors=0100

can you try to fix it? please. Your solution looks more elegant.

7

I know why it isn’t working. you know that what’s inside of the square brackets are the pieces of code you put it. Right? That will throw a huge css error.