Need Help with a Responsive grid display

I'm working on a press page for a game me and my friends are creating and I cannot figure out how to make this section do what I need it to do for the design to work. I've been sitting here for 3 hours trying different approaches to Display: grid using repeat, auto-fit, auto-fill, minmax and everything. Please someone shine a light on this for me. The images basically need to be by the side of their paragraph when the display has width and when smaller they need to go above (in the case of the first 2 images) or below (in the case of the last image). I feel like I am over-complicating this, but I wanted the image to only cover about 30% of the line space and the text be the rest of the 70% of the space (on desktop). I've tried so many things and nothing is doing this correctly. In I have not been able to make it responsive, I've gotten close to it but it does not respond correctly. pls help, I've only been coding for 3 months am new to this.
This is the code: https://codepen.io/thayna-linhares/pen/OJGgYXy I've also but the image of the figma design for reference.
No description
No description
18 Replies
Mannix
Mannix8mo ago
your minmax is missing the px for the first value also you want one minmax there probably
Roxie0strawberry
That was a slip out sorry but still doesn't work looks super off
No description
Mannix
Mannix8mo ago
did you make your images responsive?
Roxie0strawberry
I think I did : .history-image-1,.history-image-2,.history-image-3{ max-width: 332px; min-height: 150px; margin: auto; flex-grow: 1; }
ἔρως
ἔρως8mo ago
why flex and not grid?
Mannix
Mannix8mo ago
you want to add
img {
max-width: 100%;
display: block;
}
img {
max-width: 100%;
display: block;
}
Roxie0strawberry
Okay that def helped a little with the images, now it's just the grid being fussy updated the code as well to my older code that was closer to the right thing Have tried it a little, but I'm a little more used to grid so it didn't go well Right now the images and text are doing the right things they are just not stacking in smaller screens the way they should
Mannix
Mannix8mo ago
there is nothing in your code that would make them stack on smaller screens
Roxie0strawberry
Yeah! every time I use a minmax with a autofit I can't make the columns do the 1fr 2fr thing That's my big problem. Sorry if this seems stupid, I am still learning.
Mannix
Mannix8mo ago
what is that 1fr 2fr thing suppose to do/be
Roxie0strawberry
so they have this spacing of the image taking up around 30% and text with the rest of space.
No description
ἔρως
ἔρως8mo ago
the default is to stack if you want it to stack, all you have to do is absolutely nothing at all have you considered starting over? throw away all the grids and floats, then start over
Mannix
Mannix8mo ago
yeah but grid-template-columns is declared so default behavior is gone you would need a media query
ἔρως
ἔρως8mo ago
yup and in this case, doing backwards will be easier
Mannix
Mannix8mo ago
yeah i would go with min-width media query to get the side by side effect instead of trying to use auto-fit
ἔρως
ἔρως8mo ago
yup a lot easier to maintain as well
Roxie0strawberry
Okay I'm with you guys I was thinking over lunch and takes makes perfect sense. You guys, I did it! You were 100% right and it was a question of not overcomplicating things and using display flex. Thank you sooooo much ❤️
ἔρως
ἔρως8mo ago
you're welcome keeping things simple is always better
Want results from more Discord servers?
Add your server