Tribute Page Feedback & help with test 10

Code Feedback
1

Hi FCC community, hope you’re doing well!

I was wondering if I could get your guys feedback on my Tribute Page Project. You can find the project by following this link.

At the bottom of this post you can find out some of the specific areas I would really appreciate getting feedback for but before the list I’d like to ask for help on completing the last test.

TL;DR -> the page doesn’t pass the img responsiveness test but the img is definitely responsive. suggested max-width property for img element conflicts with extra wrapper css.

If you run the little JS test embeded in the top left corner, you’ll see that my projects fails the test for the image responsiveness. If you resize the page or open it up on any device over 320px, you’ll see that the resizing is okay on different screen sizes. The test suggests using the max-width property on the image element but doing so kinda ruins the image for me. What I used was another wrapper div, named cropper in CSS to do a bit of image manipulation and get a really nice looking circular shape. I applied this because the image I’m using isn’t square-shaped and using just border-radius on the image would produce an ellipse rather than a circle, but if I tweak the image using the cropper it looks perfect. I took care of the responsiveness in several cascading media queries by basically scaling down the image as the screen gets smaller.

The stuff I’d appreciate feedback on is:

  • Accessibility
  • General responsiveness
  • Code structure
  • Visual design

Any other feedback is welcome too of course :slight_smile:

2

A few things:

  • When I increase the text size the content breaks out of the colored boxes. If you don’t know what I am referring to, using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Holding down Ctrl, scroll the middle mouse button to increase the text size. It won’t take long before you see the problem.
  • At narrower widths you should probably have the year move above the content so that you have more horizontal room. This is especially needed at bigger text sizes. Do not reduce the text size at smaller widths. People should be able to view your page with whatever text size they need.
  • The content for each year should probably be in a <p> instead of a <strong>. Use CSS to style the content.
3

I got the image rounded and passing the test by doing the following:

#cropper {
  display: inline-block;
  position: relative;
  width: 450px;
  overflow: hidden;
  height: 330px;
  border-radius: 50%;
}

#image {
 height: auto;
 max-width: 100%;
 display: block;
}
@media (max-width: 570px) {
  #cropper {
     width: 350px;
     height: 260px;
  }
@media (max-width: 460px) {
    #cropper {
      width: 300px;
      height: 170px;
    }
    @media (max-width: 420px) {
      #cropper {
        width: 200px;
        height: 140px;
      }

It’s more of an oval now, and I don’t know if that’s what you’d like, but it passes all the tests now.

You should make some of the highlight divs larger because the text is right at the edges on some of these.