Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Your img element should have a display of block.
Failed:Your #image should have a max-width of 100%.
Passed:Your #image should have a height of auto.
Failed:Your #image should be centered within its parent.

Your code so far

<!-- file: index.html -->
*{
    padding: 0; 
    margin: 0;
    border: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#image{
    display: block;
    height: auto;
    max-width: 100%;
    margin: 10px auto;
}
img{
  display: block;
}
 #img-caption{
    text-align: center;
    padding: 15px 0 10px;
 }
#img-div{
    background-color: white;
    padding: 20px;
    margin: 0px 20px 0px 20px;
}
header{
    text-align: center;
    margin: 20px
}
#main{
    background-color: #EEEEEE;
    border-radius: 2px;
    margin: 20px 10px;
    padding: 20px 0px;
}
#tribute-info{
    text-align: center;
    padding: 40px;
    margin: 0px;
    font-weight: bolder;
}
section{
    text-align: left;
    display: flex;
    justify-content: center;
    list-style-type: circle;
    line-height: 2;
    list-style: disc;
    margin: 0 20%;
    min-width: 60%;
}
span{
    font-weight: bold;
}
.footer{
    margin: 0 20%;
}
h4{
    text-align: center;
    margin: 20px auto 40px auto;
}a{
    text-decoration: none;
    color: blue;
}a:active{
    color:blueviolet;
}
a:hover{
    
    text-decoration:underline;
}
@media screen and(max-width: 600px){
section{
    min-width: 600px;
    width: 60%;
}
}

/* file: styles.css */
*{
    padding: 0; 
    margin: 0;
    border: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#image{
    display: block;
    height: auto;
    max-width: 100%;
    margin: 10px auto;
}
img{
  display: block;
}
 #img-caption{
    text-align: center;
    padding: 15px 0 10px;
 }
#img-div{
    background-color: white;
    padding: 20px;
    margin: 0px 20px 0px 20px;
}
header{
    text-align: center;
    margin: 20px
}
#main{
    background-color: #EEEEEE;
    border-radius: 2px;
    margin: 20px 10px;
    padding: 20px 0px;
}
#tribute-info{
    text-align: center;
    padding: 40px;
    margin: 0px;
    font-weight: bolder;
}
section{
    text-align: left;
    display: flex;
    justify-content: center;
    list-style-type: circle;
    line-height: 2;
    list-style: disc;
    margin: 0 20%;
    min-width: 60%;
}
span{
    font-weight: bold;
}
.footer{
    margin: 0 20%;
}
h4{
    text-align: center;
    margin: 20px auto 40px auto;
}a{
    text-decoration: none;
    color: blue;
}a:active{
    color:blueviolet;
}
a:hover{
    
    text-decoration:underline;
}
@media screen and(max-width: 600px){
section{
    min-width: 600px;
    width: 60%;
}
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi there and welcome to our community!

You don’t need the img ruleset, as it’s redundant. You’re already setting the display property for the image in the id selector above it.
However, this is not the issue with the failing tests. It may be that your HTML doc is not linking correctly to the CSS file.
Could you share your HTML code too please?

3

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