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
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. 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