Tribute Page Help Please (with CSS Grid)

1

Hello,

So ive created by tribute page as follows here: https://codepen.io/katieraby/pen/zYOPYav

It doesn’t have the easiest transition into mobile (and some parts - around 800px are cut off), and I think there must be a way to control this just using grid without media queries?

The problem is that I like to maintain a set width of the image and the content on the second row (I don’t want it to max out across the page, and I like having two columns of space either side)

Can anyone help please?
I have spent days puzzling over this

Thank you!
Katie

2

Hi,
If I understood you correctly.

Try to change to this:
grid-template-columns: auto minmax(auto, 425px) minmax(auto, 380px) auto;

Here you will find more options: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

3 Likes
3

Wow thank you!! That worked - it has a super smooth transition now!! :smiley: I’m just going to read the docs to find out why now haha. I decided to keep my media queries because they defined how the grid areas collapse - so the image folds underneath the text rather than stays side by side