Tribute Page Responsive Image Test Fail

Hi,
I’ve been trying to work on my Tribute page project but it’s unable to pass the #8 test which says that the image must be responsive. However, image is responsive and changes size on reducing the viewport size but I’m still failing the user test. The test result says-" Try using the “max-width” style property : expected ‘none’ to not equal ‘none’", but my code already has that.
I’m sharing my codepen project link here. Really hope you can help me figure out the issue.
Also, any general feedback on my first project would be really appreciated as well :slight_smile:

Thanks

Make sure you click on the red button below the “Run Tests” button and read the entire error message for each one that is not passing. It pretty much tells you exactly what is wrong.

1 Like

#Layout

1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the "max-width" style property : expected 'none' to not equal 'none'
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889
l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130
FCC_Global</e.exports/n.notStrictEqual@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:736
test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:121023
FCC_Global</</<[33]</</g.prototype.run/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
FCC_Global</</<[33]</</g.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963
FCC_Global</</<[34]</</N.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686
s/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075
o/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45146
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44190
FCC_Global</</<[34]</</N.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44961
f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1384
var t,r=document.getElementById("image"),a=e(r,"max-width"),n=e(r,"display");o.assert.notStrictEqual(a,"none",'Try using the "max-width" style property '),o.assert.equal(n,"block",'Use the "display" style property with a value of "block" for responsive images.');var 
s=r.style.getPropertyValue("display"),i=r.style.getPropertyPriority("display");r.style.setProperty("display","none","important"),t=e(r,"height"),r.style.setProperty("display",s,i),o.assert.equal(t,"auto",'Use the "height" style property with a value of "auto" for responsive images.')

This is what it says, but as far I can understand I have already added the display, max-width and height attributes

Yes, you did. But only in the media query.
The image will be adjusted only if the view port is < 460 px.

@media (max-width:460px){
  #main{
    margin:0;
  }
  #title{
    font-size: 15px;
    text-align: center;
  }
img{
    display: block;
    max-width: 100%;
    height: auto;

But you have one more CSS statement to your image. Look above.

Currently you would only pass the test with a viewport < 460px.

2 Likes

That worked! I don’t know how I did such a silly mistake!
thank you so much

We all make mistakes! Don’t make yourself smaller than you are. Sometimes it’s easier to look up from the outside. :slightly_smiling_face:

1 Like

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