Tribute Page : Feedback needed please

This is my tribute page. I made this prior to recent changes, so please don’t consider the user stories as I have made another for that.

Please give your valuable feedback.

Good work!

It needs some improvements tho, let’s make them happen.

First it’s about the image(avatar of Legendary Steve), You set the width to 40%, so why? I suggest you set it to 90%, and set a max width too, something like this:

.image1{
  display: block;/*why?!*/
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width:6in;
  border: solid;
  border-radius: 1em;/*try using relative units over absolute units*/
  border-width: 0.5em;/*try using relative units over absolute units*/
}

Next try to use relative units over absolute (e.g. using em over pixel)

Another issue is about not well typography! it’s not critical. I think the first paragraph in description is a little too much. If this could be splitted into two paragraph would be great (but again, not critical).

The major issues are about quote and video section, they are not responsive! I was expecting each row contains one quote (at-least in mobile) but it’s half of a row in a column(works in desktop, broken in mobile).

Also please do not use li for hosting quote! having a bullet for a quote is not very senseful! use blockquote tag instead.

And finally the icons/links at the footer. You may apply more margin for each icon could be very good.

Keep going on great work, happy programming

1 Like

As @NULL_dev pointed out, if you use absolute units (like pixels), the page will try to display the exact same dimension on all different devices that will try to access it. So the page contents will look broken or out of place on smartphones and too small on desktops.

I noticed that you used a display font (Bad Script) that resembles handwriting on your quotes. It looks good when used in small quantities on places when you want to highlight, but when used in large amounts of text, it will be difficult to read and the users will skip them, instead of focusing on them.

1 Like