Responsive Web Design Projects - Build a Tribute Page

HTML-CSS
#1

I have three tickets that does not working:

1- Your img element should have a display of block : (I used display:block).
2- Your #image should have a max-width of 100% : (I used: max-width: 100%)
3- Your #image should be centered within its parent :(I used margin: auto)

that is supposedly to be “easy”, but its does working

what can I do?

   **Your code so far**

/* file: index.html */

<main id="main">
 <div id="title">
   <p>"Dr. Norman Borlaug"</p>
 </div>

 <figure id="img-div">
   <figcaption id="img-caption">
     <p>este es img-caption</p>
     <img id="image">
   </figcaption>
 </figure>

 <div id="tribute-info">
   <p>Este es tribute-info</p>
 </div>

 <a id="tribute-link" href="" target="_blank">sss
 </a>

</main>


/* file: styles.css */

#main img {
display: block;
}

#image {
max-width: 100%;  
height: auto; 
margin: 0 auto;
}
img-caption{
 margin: 0 auto;
}

   **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

#2

img and #image selectors are for the same element so you should only use the id selector for the image and move display;block property to it and remove #main img selector

#3

Thx for answer :slight_smile:

Not working yet :frowning: , and I am using the both way: the id selector and the markup selector :frowning:

#4

are you linking the css in the html? from the code you posted it doesn’t seem so, so the css is not applied

1 Like
#5

<img id="image">

should not be wrapped with figcaption, figcaption should be below the img element, <figcaption id="img-caption">este es img-caption</figcaption>

#6

Thx for answered :slight_smile:

In the exercises its not necessary linked the CSS sheet, every its ok, except those 3 tickets.
1- Your img element should have a display of block : (I used display:block).
2- Your #image should have a max-width of 100% : (I used: max-width: 100%)
3- Your #image should be centered within its parent :(I used margin: auto)

I am doing “Build a Tribute Page " exercise from " Responsive Web Design Projects” block and I search the answered there, but It not working :smiling_face_with_tear:

#7

it is not tested, but if you don’t link the css file it is like you have not written any css

#8

Thanks this was the solution. :sweat_smile: :grin: