Help with Tribute Page_

Hello, I’m getting the following error and would appreciate any help: #Layout

  • 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

My CodePen link: https://codepen.io/algala-droid/full/ExVwazK

Thank you.

I tried tweaking it a bit, but I’m afraid your code is a little too messy.
You’ve got an unclosed <div> tag, <div> tags closing in places that don’t make sense, and a CSS reference #img that doesn’t have a matching id in the HTML…

Thanks again @nhcarrigan, I appreciate your help. I think I’m just going to have to sit down and really go over the code again.

The W3C HTML Validator can be quite helpful!

1 Like

Actually, the fix is quite simple.

#1 : Place </div></div> right after

Chairman of SolarCity.

in HTML.

Then replace (YOUR CSS CODE)

  #img {
    display:block;
    max-width: 100px;
    height: auto;

with (MY CSS CODE)

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
YOUR PROBLEMS: (click me)

your problem is that
#1 you have no ID=“img”, so your #img is referring to nothing.
#2 height: auto does nothing because your div is actually going to be same height of your image, because you haven’t set a size for the div.

my code will fix your issues and it will pass all tests.

NOTE:(click me)

The “#” refers to elements with “ID=” and “.” refers to elements with “CLASS=” if you don’t place a period or # before an element ie (img) it will refer to all img elements.

1 Like

Thank you @Jutkus, it works!! I really appreciate you taking the time to break things down and show me where I went wrong. Makes so much sense now:))

1 Like

You can place the the (2) Divs on a new line for cleanliness like so:

   </div>
</div>

I just closed your 2 divs that had no closing.

Other than that, it looks great. Keep it up!

1 Like