Tell us what’s happening:
My Tribute Page is failing the below requirements but I can’t see why. Can you point me in the right direction please?
- Your img element should have a display of block.
- Your #image should have a max-width of 100%.
- Your #image should be centered within its parent.
img {
display: block;
max-width: 100%;
height: auto;
}
#image {
display: block;
max-width: 100%;
margin: 0 auto;
height: auto;
}
#img-div {
text-align: center;
margin: 0 auto;
}
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Fujifilm X-T2</title>
<link rel="stylesheet" href="test_styles.css">
</head>
<body>
<main id="main">
<h2 id="title">The Fujifilm X-T2</h2>
<div id="img-div">
<img id="image" src="Image.jpeg" alt="Front view of the Fujifilm X-T2 camera with lens">
<figcaption id="img-caption">The 'Everyman' camera, that took on the world...</figcaption>
</div>
<div id="tribute-info">
<p>Numerous cameras may lay claim to the title 'Best of their Generation' but none moreso than the mighty X-T2...</p>
<p class="tribute-info">Released in 2016, marked a significant leap forward for the X Series lineup, positioning itself as a formidable contender in the mirrorless camera market. At a time when Sony’s Alpha series and Panasonic’s GH line were gaining traction with their cutting-edge autofocus and video capabilities, the X-T2 stood out with its unique blend of retro design, stellar image quality, and robust handling.</p>
<ul>
<li>X-Trans APS-C sensor</li>
<li>Outstanding sharpness</li>
<li>Color accuracy</li>
<li>Exceptional low-light performance</li>
</ul>
</div>
<div id="tribute-link-div">
<a id="tribute-link" href="https://fujifilm-x.com/global/products/cameras/x-t2" target="_blank">Learn more about the Fujifilm X-T2</a>
</div>
</main>
</body>
</html>
/* file: styles.css */
/* Ensure all images are displayed as block elements */
img {
display: block; /* Ensures all img elements are block-level */
max-width: 100%; /* Images will scale down to fit their containers */
height: auto; /* Maintain the aspect ratio */
}
/* Applies specifically to the #image */
#image {
display: block; /* Ensure #image is a block element */
max-width: 100%; /* Ensures the image doesn't exceed its parent container's width */
margin: 0 auto; /* Center the image horizontally */
height: auto; /* Maintain aspect ratio */
}
/* Center the image within its parent using flexbox */
#img-div {
display: flex; /* Flexbox layout */
justify-content: center; /* Center the image horizontally */
align-items: center; /* Center the image vertically */
margin: 0 auto; /* Ensure parent div itself is centered if necessary */
flex-direction: column; /* Ensure caption and image are stacked vertically */
}
body {
font-family: 'Gill Sans', sans-serif; /* Fallback to sans-serif if Gill Sans is not available */
}
main {
background-color: black;
}
#title {
font-family: 'Gill Sans';
font-weight: bold;
text-align: center;
font-size: 50px;
color: aliceblue;
}
#img-caption {
font-family: 'Gill Sans';
text-align: center;
font-size: 20px;
color: aliceblue;
}
.tribute-info {
background-color: black;
color: #f0f0f0;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 80%;
margin: 20px auto;
}
ul {
background-color: black;
font-family: Gill Sans MT;
font-weight: 500;
text-align: left;
padding-left: 20px;
margin-left: 0;
list-style-position: inside;
}
#tribute-link {
color: white;
text-decoration: underline;
}
#tribute-link:hover {
color: lightgray;
}
/* Ensuring responsiveness */
@media (max-width: 768px) {
#title {
font-size: 32px;
}
.tribute-info {
width: 95%;
}
ul {
padding-left: 10px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15
Challenge Information:
Tribute Page - Build a Tribute Page