HTML Project 1 Challenge: User Story #8

Hello Campers,

I have tried a few solutions to pass this test but nothing seems to work. I would like to see if you guys could take a look at it please. In VS code, the image is in the center an everything seems to work fine. As soon as I dump the code in CodePen, the image is on the left side and says give the error of the following task: The “img” element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Thanks,


<style>

.center {

  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;

  
}

.theme  {

background-color: black;
color: pink;
font-family: Brush Script MT;

}

.ache1 {

  text-align: center;
  font-size: 50px;
  color: pink;
  font-family: Brush Script MT;

}


.ache2 {

text-align: center;
font-size: 50px;
}



</style>

<html>

<main id="main" class="center">

  <body style="background-color:black;">

<div id= "title"  class= "theme ache1"> <h1> Tribute to Gwen Stefani</h1></div>


<div id= "img-div">

  <a href="#"><img src="https://cdn140.picsart.com/279818018001201.jpg?type=webp&to=crop&r=256" 
    id="image" class= "center" alt="Gwen Stefani" /></a>

<h1 id= "img-caption"class= "theme ache2"> An ever-glowing beauty queen</h1>
 

  <p id= "tribute-info" class= ache1> <a id= "tribute-link" target= "_blank" href= "https://www.gwenstefani.com/">Gwen Renée Stefani</a> (born October 3, 1969) is an American singer, songwriter, actress, and record producer. 
    She is a co-founder and the lead vocalist of the band No Doubt, whose singles include "Just a Girl", "Spiderwebs",
     and "Don't Speak", from their 1995 breakthrough studio album Tragic Kingdom, as well as "Hey Baby" and "It's My Life" 
     from later albums. </p>


</div>



</body>

</main>


</html>


This is what I get when I import your code.

Hello nhcarrigan,

Thank you in advance for taking a look at my code. If you copy from to on css and starting from to on html section, I do get 9 out of 10.

Check the error message:
Try using the max-width style property.
The test is actually looking for your image to have max-width set in the CSS. Picky, I know. :slight_smile:

Thanks your swift response. I have updated the code I submitted with the “max-width” spec. It is still not working. Did you run the code and gave you 10/10?

Where are you putting the max-width? It looks like you put it on the center class, which I didn’t try. I specifically put it on the img element…

img {
/* put stuff here */
}
1 Like

nhcarrigan,

Thank you so much dude! You came up clutch. This is so silly I only changed the name of the class from .center to .img!

1 Like

Glad I could help! Sometimes we just need a little nudge in the right direction. :upside_down_face: