Tell us what’s happening:
Describe your issue in detail here. Hey I’m having issues with 2 of the tasks.
-
Your
img
element should have adisplay
ofblock
. -
Failed:Your
#image
should have amax-width
of100%
.
I have tried following multiple videos, using different selectors i.e #image or #img or even img-div but im not sure why I cant do these two tasks. Ive been working on this certificiate/project for a while now and I just don’t know what to do to fix my code and complete these tasks.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='width=device0width, initial-scale=1.0'/>
<title>FCC Tribute Page</title>
<link rel='stylesheet' href='layout.CSS'/>
</head>
<main id='main'>
<div id='main'>
<h1 id='title'>THE MINIONS</h1>
<div id='img-div'>
<a id='tribute-link' href='#' target='_blank'/>
<img alt='Buzzlightyear' src='https://i.guim.co.uk/img/media/3f30a239d6ff96145ee66e0dfb075dd54ad26d95/639_0_2645_1588/master/2645.jpg?width=1200&quality=85&auto=format&fit=max&s=e2f6f213fc781bb08cb800be405b04c9' id='image'/>
<figcaption id='img-caption'>The Minions meeting Gru for the first time. </figcaption>
</div>
<p><div id='tribute-info'>
<b> Facts about the Minions</b>
<ul>
<li>Minions have 3 fingers in each hand.</li>
<li>They survive through any adversity; from snowy to sunny climates to even outer space</li>
<li>The Minions speak Minionese, a combination of multiple languages like Spanish, Italian,French,Russian and Korean Chinese; sometimes even gibberish</li>
</ul>
</div>
</div>
</main>
</html>
/* file: styles.css */
image {
width: 500px;
max-width: 100%;
height: auto;
margin: 0 auto;
}
img {
display: block;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: