Feedback for CSS Tribute Page please

This a the HTML CSS version following the new syllabus

thx in advance

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.


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

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.


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

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.


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

thank you::grinning:

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.

thank you for your help