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?
Your browser information:
User Agent is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/184.108.40.206 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge:
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
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!
Did that work?
Nope. Issues remain in spite of doing this @Mjesson33 :
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.
max-width: 150px; /*These are just example values*/
Above, you mentioned setting height: relative; I believe you meant to say 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! 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
Sorry, @christinebelzie, that was a link to this page.
Did switching from Flexbox solve it?
I ran out of replies for today. try this:
What were your intensions with position: relative; ?
Here? This just means to set
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 . Hmm. Could it be the
I was told that I needed to that. Use relative
Hi @teiResa & @Mjesson33! I found my solution! I just added
Here it is in full: Tribute to Rihanna
Yay! Go, @christinebelzie !
Unrelated, there is a semicolon ( ; ) missing in the figcaption type selector in the your css.
Thanks for your point @teiResa! Ironically, all the semicolons are in my solution on FCC lol!