Having a really hard time with the CSS on Tribute page

Code Feedback
1

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?

2

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

3

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.

4

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.

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

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

7

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

Example:

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