So I have a Tribute Page and with the tests, all of them are passing except the one that says “The image should responsively resize based on browser window size”. The image does in fact responsively resize in the browser and even in the CodePen Preview. What am I doing wrong?
HTML Code:
<div id="img-div">
<div id="image">
<img src="https://cdn10.bigcommerce.com/s-o6vy9cv/products/104910/images/104443/170994__50068.1519323630.500.500.jpg?c=2" alt="Paul Walker" class=".resp">
</div>
<div id="img-caption">
<p cid="tribute-info">Picture of Paul Walker in front of a Toyota Supra. The car made a notable appearance in the movie "The Fast And The Furious"</p>
</div>
</div>
CSS Code:
.resp {
style: none;
width: 100%;
height: auto;
}
img{
margin: 20px;
width: 80%;
height: auto;
max-width: 80% ;
position: relative;
margin: auto;
display: block;
}
@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}
Full CodePen Project:
https://codepen.io/randomprogrammerguy/pen/abmOxjM
Also in case you are wondering, I tried the tests in Safari and Chrome, both of them have the same result.