Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Help! I cannot figure this out! I have been fiddling with this for several days. Every suggestion from other posts hasn’t worked. Frustrating.
Thanks in advance for any help. :slight_smile:

the two tests I can’t seem to fix:

  • Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

Your code so far
#img-div {
display: block;
background: white;
margin: auto;
width: 60%;
padding: 5px;
padding-left: 20%;
padding-right: 20%;
}

img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}

#image {
max-width: 100%;
margin-top: 20px;
}

my entire code for the tribute page challenge is here:

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<body>

  <main id="main">

    <h1 id="title">Honoring Pioneering Architect <br>Julia Morgan</h1>

    <figure id="img-div">
      <img id="image" src="/main-imgs/pool-a.jpg" alt="Berkley City Club pool, designed by Julia Morgan."/>
      <figcaption id="img-caption">
        A current day image reflecting the timeless beauty of the Berkley City Club Pool, designed by Julia Morgan,
        1930.
      </figcaption>
    </figure>


**Your browser information:**

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

**Challenge:**  Tribute Page - Build a Tribute Page

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page
2

are you linking the css file?

3

not sure what you mean? I did link my codepen, which has both html and css for the tribute challenge. If this isn’t correct, can you share with me what you want?

4

I am a beginner in all aspects of coding. Catching up as fast as I can, but I find many holes to dive into and figure out what is what.

5

i think Ilenia was asking you if you linked the correct stylesheet file.
Usually the stylesheet file in fCC challenges is called styles.css

6

Thanks for the clarification, got it! Yes style sheet is linked. It will show this in my codepen -which is the same as FCC tribute challenge. I am stumped and so far, I must have canceled out what is written and shown above by some other code in my stylesheet. Should I have included the entire css code from the stylesheet here?

7

are you sure the correct stylesheet is linked? when I looked at your codepen it didn’t have styles.css linked.

ps. I finally got some time to try your code with the corrected link reference and it passed the test. So just fix the stylesheet ref and you should be good.

8

I have checked and double checked and then quadruple checked, the link is there and it’s linked. When I test, it’s still showing the img element of display block and #image, max-width 100% not passing.
UHG. I am so frustrated.

9

like I said, I simply changed the name of the stylesheet to “./styles.css” and everything worked.

You can show me you code’s head element again if you like.

10

You were absolutely right. Happy dance! My code passed!
I kept on keeping " ./stylesheet" in place and my bloody brain would not see “./styles.css”
-my brain can now take some downtime away from this. Every code mistake I have made so far has almost always either been a; < >, / , “” or a spelling issue.
Thank you for your responses.

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.