How do I add a display of block to my image element for my tribute page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I linked the style sheet and created an img class and everything but i’m still getting an error.

Your code so far

/* file: index.html */
<!DOCTYPE html>
<main id="main">
<title id="title">Uncle Melvin</title>
<div id="img-div"><img id="image" ><div id="img-caption">Image</div >
<h1 id="tribute-info">Dedicated to my amazing uncle</h1>
<a rel="stylesheet" href="/styles.css" id="tribute-link" target="_blank"></a> 
</div></main>

/* file: styles.css */
.img {
display: block;
max-width: 100%;
height: auto;
align-items: center;}

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

2

You haven’t linked your CSS file properly. See more information at:

CSS HowTO - W3 Schools

I also don’t see any image in your code. If you do not set a image in your code nor link your CSS file, your display block will not work.

1 Like
3

Hi @malikj43 ,

This is a class selector .img , which means you’re targeting elements with a :
class = "img".

What you need here is an element selector, you want to target the img html element.

1 Like
4

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