Tribute Page - Build a Tribute Page max width not working

[christinebelzie]

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:

freeCodeCamp.org

[Mjesson33]

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.

[christinebelzie]

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

[Mjesson33]

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

[christinebelzie]

Ohhh. I was experimenting with Flexbox @Mjesson33

[Mjesson33]

Better that than missing a semicolon somewhere!

Did that work?

[christinebelzie]

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

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

[teiResa]

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.

… 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.

[christinebelzie]

Sure @teiResa! 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

[teiResa]

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; ?

…

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.

[christinebelzie]

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

position: relative;

[christinebelzie]

I was told that I needed to that. Use relative

[christinebelzie]

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

margin: auto;

Here it is in full: Tribute to Rihanna

[teiResa]

Yay! Go, @christinebelzie !
Very Informative.

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

[christinebelzie]

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