Tribute Page Feedback Needed Please

Code Feedback
1

Here is the link to my pen:

It cleared all tests except for the layout test. Regarding the layout, the test is returning that the element should responsively resize, relative to the width of its parent element, without exceeding its original size.

My code:
img {
max-width: 100%;
display: block;
height: auto;
}

I also welcome any and all feedback from the tribute page in general. All constructive criticism welcomed.

*** Edited to add…
I do believe I have everything fixed, working, and responsive. However, there is quite a gap under the video. I have played with the settings and can’t seem to figure this one out. Anyone? Thanks again!

Tonia

2
  • Everything you put in <head> is metadata. You don’t style it, so putting an id on the <title> element is not necessary.
  • a div with an id of main can be replaced by a main element itself.
  • Is your picture supposed to be aligned to the left or in the center?

Other than that, looks good! :slight_smile:

1 Like
3

It’s looking good and a great tribute subject too!

The layout issues are being caused by the code structure around the image. I think the test suite it having trouble finding what it needs and is failing. I moved a few things around and it’s passed all 10

<div id="img-div">
  <a id="tribute-link" href="" target="_blank">
    <img src="" alt="Robin Williams photo"  id="image">
  </a>
  <div id="img-caption">
    caption
  </div>
</div>

The img-div should contain both the img (with image id) and img-caption (that should contain text).

You’ll also want to take a look at it’s responsiveness, everything breaks out of the container when you shrink it down to a mobile screen size. Perhaps use a media query to reduce the main and box-content margins and also get the video iframe to have a responsive width

1 Like
4

Thank you.
Yes, the image is supposed to be centered.
I agree that everything in doesn’t need styling, but the test requests were confusing to me. To me, tribute-info and title were redundant. Honestly, I stuck them in the just so it would pass. lol Same goes for the #main. I already had the tag. Maybe I should just leave that out for this particular project.

5

Thank you.
I agree the test suite is having an off day. When I started, it changed a lot of my code by leaving out several parts. It was frustrating, but fortunately, I keep a copy open in Sublime as well. I appreciate the code help. I applied it and passed.

In regards to the responsiveness, I had included thinking it would apply responsiveness to the page. I will investigate further with your suggestion on the main and box-content margins as well as the iframe so all is responsive.