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

https://codepen.io/freeCodeCamp/pen/MJjpwO

I’m getting this error. Please help.

I’m not seeing any code in that pen. Can you post the updated link that has your code in it?

Here it is.

https://codepen.io/palanggaaa111/pen/OJMbMbx

This should help you out. I’ve also included comments to explain how I updated your code.

#image {
  position: relative;
  width: 70%;
  max-width: 100%;/*will prevent the image going outside of its container*/
  display: block;/*puts the image on it's own line and allows you to specify the height and width, if you choose*/
  margin: auto; /*to center the image*/
}

PS - I don’t think you need the declaration for .bar1, .bar2, .bar3 (unless you really want them. Those bars appear on the sample Pen because that’s how you click and run the test codes. You don’t need to recreate those on your site for the test to pass. Including the JavaScript at the top of your HTML is sufficient.

Great! It worked, thank you.I have a question though, do we need to always put max-width for the purpose of media query or we can use it anytime?

I already removed the burger menu, I thought it was included.

you can use max-width on any element with content that you want to size relative to the confines of its parent element.

1 Like