Tribute Page - Build a Tribute Page

HTML-CSS
1

One of the test to complete is to have a #image with a max-width of 100%, which I do have, but it’s still not letting it pass. Why?

<!-- file: index.html -->

<div id="img-div">
          <figure>
          <img id="image" src ="https://i.guim.co.uk/img/media/8bf2d759abda33b9e48cd8443216a6755681599d/0_58_3508_2105/master/3508.jpg?width=1900&dpr=2&s=none" alt="Dervla Murphy walking her bike across the green rolling hills of Ireland"/>
          <figcaption id="img-caption">Dervla Murphy in 1990. She had a tolerance for hardship and a curiosity about everyday elsewheres, which she kept through half a century of advancing by bike, foot, mule and cart (she never drove a car) on and off road across four continents.<br>
<i>Text: Veronica Horwell / The Gaurdian</i><br>
<i>Photograph: Gamma-Rapho/Getty</i></figcaption>
          </figure>
        </div>


```css
/* file: styles.css */


#img-div img {
  width: 100%;
  max-width: 820px;
  margin: 0 auto; 
  border-radius: 10px;    
}
#image {
  max-width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

1 Like
2

Welcome to the forum @ruralmaps

The #img-div img selector has a max-width property value of 820px,
as the img element nested in the div element is targeted.

Try remove the max-width property from the #img-div img selector.

Happy coding

1 Like
3

This was the solution. Thank you so much for your help. I kind of ran through this project without bothering too much about the requirements and then had to fit them in post. Not the best plan of attack. Thank you again!

2 Likes