Tribute page CR 28-08-22

[renners7777]

Hi all,

I have completed my tribute page now too. I tried using flexbox to get some practice in but struggled a bit with this. Link to work: CR Tribute page (codepen.io). Feedback appreciated.

Chris R.

[admit8490]

Like use of linear gradient for background

Instead of these 3 props, you can use just one margin prop. Search on MDN how to write margin prop.

margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;

I think you get general idea how to use flex, but you can experiment a bit more:

[renners7777]

Thank you for the feedback. I’ll have another look at my code. I did try to get them to align correctly but knew someone would pick up on that! I’ll change the margin prop too.

[admit8490]

There are bunch of little things that can be done about your page. But in general it looks just fine.

As an option - go back to it from time to time and try to apply new knowledge which you will acquire from further parts of curriculum.

[renners7777]

It should work with the “flex-start” property but for some reason it isn’t working! Very frustrating.

[admit8490]

You know that your paragraphs are not actually flex-items, right?

Your sections are(I mean .quotes1, .quotes2… - these guys).

So maybe you want to do something about that.

And I think I saw some syntax mistakes in your html - double-check your code in validator before moving on with flex shenanigans.

The W3C Markup Validation Service

[renners7777]

Good point! That slipped my mind. I’ll come back again when I’ve got it sorted but thanks for your help.

[admit8490]

Keep in mind, there are bunch of approaches here:

• you can delete all these 5 sections, and try to deal with paragraphs as flex-items inside one single container

• you can make all these 5 sections to be flex-containers

• you can try to find a way to align p elems inside sections without flex.

• you can even try to mess around grid, not flex