Tribute Page - Build a Tribute Page max width not working

Hi there! I’m currently doing User story 8, and I noticed that the code test told me that my max width was wrong even though I followed the correct format(see the code snippet below for reference). What did I do wrong?

  max-width: 100%;  
	height: auto; 
	display: flex;
	justify-content: center;  
  }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

1 Like

Sorry, try setting the height to “relative”

In the user story it says to set it so it’s relative to its parent element.

The css property “relative” achieves this.

@Mjesson33, I tried height: relative; it still says incorrect on the code test

1 Like

yeah just pulled it up
the test actually says the display is supposed to be set to block not flex.

Ohhh. I was experimenting with Flexbox @Mjesson33

Better that than missing a semicolon somewhere! :laughing:

Did that work?

Nope. Issues remain in spite of doing this @Mjesson33 :

figure{
display: block;
position: relative;
max-width: 100%;
height: auto;
}

Could you post a more of the code? There may be something in the HTML too.

I did this project a few years ago, so I may be able to help. Cheers. :smile:

… Edited an hour later …
I worked through the problem from the link, and I have a few ideas it could be. First, did you remember to link the CSS stylesheet? Maybe they had you in the step prior, but if not, that was the issue I saw.

 <link rel="stylesheet" href="styles.css"> 

I am not positive whether it is mandatory, but I always pair a width with a max-width.

width: 100%;
max-width: 150px;  /*These are just example values*/

Above, you mentioned setting height: relative; I believe you meant to say height: auto;

height: auto;

Hopefully these are enough. My attempt passed, so I can send it here after if my suggestions here don’t pass. If it does, please let me know. Best of luck.

Sure @teiResa! :slight_smile: Here’s my current solution: Tribute Page - Build a Tribute Page max width not working
I would post my repo, but I used Flexbox. Just found I wasn’t supposed to lol :sweat_smile:

Sorry, @christinebelzie, that was a link to this page.

Did switching from Flexbox solve it?

I ran out of replies for today. try this:

#image {
  display: block;
  width: 80px;
  max-width: 100%;
  height: auto;
  margin:0 auto;
}

What were your intensions with position: relative; ?


relative

Here? This just means to set

height: auto;

It will just do a height that is appropriate based to the viewport size, parent element, and the width of the image.

No @teiResa it didn’t :frowning:. Hmm. Could it be the

position: relative;

I was told that I needed to that. Use relative

Hi @teiResa & @Mjesson33! I found my solution! :slight_smile: I just added

margin: auto;

Here it is in full: Tribute to Rihanna

1 Like

Yay! Go, @christinebelzie !
:clap: :clap: Very Informative.


Unrelated, there is a semicolon ( ; ) missing in the figcaption type selector in the your css.

Thanks for your point @teiResa! :slight_smile: Ironically, all the semicolons are in my solution on FCC lol! :joy:

1 Like