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.
This is the code: https://codepen.io/thayna-linhares/pen/OJGgYXy I've also but the image of the figma design for reference.
18 Replies
your minmax is missing the
px for the first value also you want one minmax there probablyThat was a slip out sorry but still doesn't work looks super off
did you make your images responsive?
I think I did : .history-image-1,.history-image-2,.history-image-3{
max-width: 332px;
min-height: 150px;
margin: auto;
flex-grow: 1;
}
why flex and not grid?
you want to add
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
there is nothing in your code that would make them stack on smaller screens
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.
what is that 1fr 2fr thing suppose to do/be
so they have this spacing of the image taking up around 30% and text with the rest of space.
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
yeah but grid-template-columns is declared so default behavior is gone
you would need a media query
yup
and in this case, doing backwards will be easier
yeah i would go with min-width media query to get the side by side effect instead of trying to use auto-fit
yup
a lot easier to maintain as well
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 ❤️
you're welcome
keeping things simple is always better