Having a really hard time with the CSS on Tribute page

Hey all, I’m having a really rough time right now and would love some help if possible. here is my codepen https://codepen.io/eddiepearson/pen/vbxQEp

Basically, I know I can text-align center everything…but I wanted to try a grid. Should I use grid or flexbox for this? Am I making this way too complicated for myself?

I’m trying to use Grid at the moment and have centered everything. Now I can’t figure out why my page isn’t responsive. I downsize the page and nothing falls inline. What’s the best way to go about this?

make it as simple or as complex as you want it to be.

if you wan’t a little challenge use Grid to divide your text into 2 or 3 columns to that it reads like a newspaper

Grid: reference here if you need it

You have error in your css - you’re targeting #img (# means id), but you have id="image".

Regarding grid vs flexbox, if you have one dimension (column or row) use flexbox if you have both columns and rows simultaneously use grid. In your case I would use flexbox.

so use flexbox on the entire page by putting display: flex , in my body? I still have issues centering everything to look like the example given for this exercise.

body {
  display: flex; /* use flexbox */
  flex-direction: row; /* arrange items in column */
  align-items: center; /* center all items horizontally */

when I did this before, they didn’t align center. Maybe I’ll delete everything and try again. TY!

Hi, @eddiepearson add the view port meta tag in header of the code then your website eill become responsive.


meta name=“viewport” content=“width=device-width, initial-scale=1.0”