Feedback for CSS Tribute Page please

Code Feedback
1

This a the HTML CSS version following the new syllabus

thx in advance

2

Hello Steve,

I would say “For those about the code, we salute you”, like you comrade, very good work.

Design is simple, neat and clean. I really like it.

I see you set background-color for #main tag. Let me note one small thing.
You see that very small white area near border of #main tag? that’s becasue body tag comes with some small value as margin.

Hit: if you like to give a background color to whole page, you better set it for body tag, rather #main

Page is responsive, very good. Because it’s simple. And this is a good thing if you ask me.

In mobile view, some section are a little hard to read, such as the list about the albums. I suggest you may add some spacing by add some margin between list elements.

Please give the quote section a dedicated style. Usually quoted sections come with a dedicated style, so user may noticed the content is quoted.
For example, a background color, maybe italic text, border maybe…

Giving a dedicated style for the foote would be a good idea too.

Overall, good work Steve.

Keep going on great work, happy coding.

3

NULL_dev

Thank you for taking the time to provide feedback, i really appreciate the detail!

I added a @media query to drop the font size and add margin for a smaller screen. I’m still trying to understand how to get the breakpoint number so i used the 540px off W3:grinning::grinning:

Changes made and link to updated page below

4

Hello Steve,

Good progress. the footer looks very good now.

One more thing, I see the top title text (AC/DC and Australian Rock Band) are so large(font size), large text could break your layout. When a text is long and it needs more space to render and there ain’t no space, so page break.
TIP: If you ask me, I suggest you don’t override font-size for body, and H1-H6 tags.

I also suggest you remove display: flex; and justify-content: center; from footer too.

About the media query you added, please not you forgot the closing block for the media query, add a } at the end of the css section.

very good, like to see more updates and progress indeed, try to add some more space between list elements.

I suggest bring more style for the quote section, my suggestion:

#rock-quote {
    font-style: italic;
    border: 2px solid #c5b36c;
    border-left-width: 7px;
    padding: 0.4em;
    background-color: #c5b36b5e;
    margin: 0;
}

Good progress comrade, keep going on great work, happy programming.

5

NULL_dev

Again, thank you very much for your feedback!

I’ve made the suggested changes and also tidied up the font sizes for all the elements for the smaller screen.

I also set the body to min-width of 320px because i noticed in CodePen i could keep shrinking the page (or is it ok to keep shrinking?)

Updated link below

6

NO! please don’t. it breaks your layout for small devices may come with zoomed config, don’t set any value for min-width is recommended.

Now it looks better and better, very good. Add top and bottom margin for quote section could be a good idea I think.

very good work Steve, keep going on great work.

Happy programming.

7

Done!

I will now go back and apply this thinking to my survey form project

thank you::grinning:

8

Well now it’s responsive, and also passes the tests! Awesome!

I’m feeling “we are on rock ‘n’ code train” pal.

Very good, keep going on great work, happy programming.

9

thank you for your help