Tribute Page Help Please (with CSS Grid)


So ive created by tribute page as follows here:

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!

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:


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