Tribute Page - Build a Tribute Page

HTML-CSS
1

hi guys, I’m stuck on this exercis because the program tells me that : my image should have a display of block, my image should have a max-width of 100% and my image should be centered within his parent.
the problem is that i already set all this things, but the program doesn’t accept it.
any advice?
thank

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tribute page</title>
</head>
<body>
    <main id="main">

        
        <div id="title">
            <h1 id="titolo">Lorem ipsum dolor sit amet</h1>
            <p id="sotto-titolo">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
        </div>


        <div id="img-div">
            <img id="image"  src="https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_small.svg" >
            <div id="img-caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</p></div>
        </div>


        <div id="tribute-info">
            <p id="tribute-title">Lorem ipsum dolor sit amet</p><br>
            <ul id="lista">
                <li><strong>2000</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2001</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2002</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2003</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2004</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2005</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2006</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
                <li><strong>2007</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod adipiscing elit, sed do eiusmod</li>
            </ul>
            <p>Lorem ipsum dolor sit amet<a target="_blank" href="#" id="tribute-link"> consectetur</a></p>
        </div>


    </main>
</body>
</html>

/* file: styles.css */
*{
    font-size: 20px;
}


main{
    background-color: rgb(170, 159, 159);
    border-radius: 5px;
}

#title{
    padding-top: 25px;

}

#titolo{
    text-align: center;
  
}

#sotto-titolo{
    text-align: center;
}

/*figure*/


#img-div{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 95%;
    background-color: white;
}


#image{
    display: block;    
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    max-width: 100%;
    
}

#img-caption{
    
    padding-bottom: 15px;
}

#tribute-title{
    padding-top: 3
    0px;

}

#tribute-info{
    display: block;
    text-align: center;
}

#lista{
    
    width: 100%;
    padding-left: 0;
}

ul li{
    padding-bottom: 15px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

To make your css work, you need to use the correct link href to the css file

The link the lesson tells you to use:
<link rel="stylesheet" href="styles.css">

Your link:
<link rel="stylesheet" href="style.css">

1 Like
3

I will try to lead you in the right direction :slight_smile:

To see if something is applied to your elements:

  • hover over the element in the preview
  • right mouse click
  • select ‘inspect’

This brings up the developer tools.
(Using freeCodeCamp’s editor, can make things look a little bloated.)

Here is the box model for your image element.
image

You can see the image has extra padding at the top.
The left and right margins are different.

I’m not sure what counts as being “centred”, so wouldn’t want to delete code when editing.
Instead of deleting a line, you could comment it out /*padding-top: 15px;*/ then run the tests to see if anything changes.

I’m not sure if this will help your project pass.
Some other things you can look into are:

  • ‘display: flex’, ‘justify-content’, ‘align-items’.
    (These are used on the parent element to centre the children)

You may also wish to try ‘flex-direction’.

1 Like
4

thank you very much, i couldn’t see my problem, you helped me a lot!! <3

5

<3 thank you a lot, now i understood my error ! :kissing_heart:

6

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