Understanding differences in code

Why does:

#image {
width: 100%;
height: auto;
max-width: 625px;
margin-left: auto;
margin-right: auto;
display: block;
}

make my image responsive as opposed to the code freecodecamp suggests:

#image {
  max-width: 100%;
  height: auto;
}

Don’t know the context you’re using it in, but yours locks it to a maximum size and centres it beyond that (also has a redundant width property, isn’t needed), so it isn’t the same. Just max width of 100% and auto height is normally fine to have images that expand or contract based on the size of their containers, you have extra constraints that you’ve added

The code

#image {
max-width: 100%;
height: auto;
}

Fails the tribute website page test on freecodecamp responsive web projects.

What I want to know is why the code:

#image {
width: 100%;
height: auto;
max-width: 625px;
margin-left: auto;
margin-right: auto;
display: block;
}

Works and passes the test.

try both with and without the display: block line

What I’d like to know is why code:

#image {
width: 100%;
height: auto;
max-width: 625px;
margin-left: auto;
margin-right: auto;
display: block;
}

Works, over the other one.

Did you try what I suggested?

I think you are missing my point. I’m looking for an explaination about why one code works and passes the tribute website tests over the other. I’m not looking to experiment with altering code after having spent all day doing so. I’m unplugged and just looking for an explaination.

I don’t know the context it being used in (you can write the styling and markup any way you choose as long as it passes the tests), so it’s difficult to give answer; something else in the styling or markup structure could have caused it, but we can’t see that.

The context, from the project instructions is:

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

The longer code, which I got from someone else works as opposed to the code suggested by freecodecamp(the shorter code)

If someone can just tell me what the propertys inside the brackets means one by one, perhaps i can deduce why the longer code works as opposed to the shorter code. Cause evem the documentation and the very fact that i spent all day on this site has left me confused and i’d like to be a developer that understands why they are copying and pasting something.

No, I know what the test says, but you can produce that project using any html and CSS you want as long as the test passes. So understanding why your test doesn’t pass necessitates knowing what the html structure and surrounding CSS that affects that image is, as it is likely that is preventing it passing. Both of the code examples you’ve posted are valid CSS, but that’s about all I can tell you

The shorter code does not work. Thats what i’m saying. But the longer one does. Hence i’m on this forum to see if someone can explain to me why and how those added properties seem to make the image responsive and pass the test as opposed to the shorter one.

I don’t think you’re misunderstanding what they’re trying to explain to you. To help you figure out why one piece of code is working and the other isn’t it would be helpful if we could see your entire code so we can see if there are other pieces of your code that are interfering with the shorter code vs the longer. If you you post the link to your code I’m sure it will easier for someone to help you.

We cannot see what is on front of your computer screen. The code, in isolation, is valid CSS, that’s literally all anyone can say, because we cannot see the context you have written it in. The way your HTML is structured could cause some issue, other CSS could cause an issue, we can’t tell because you aren’t showing any code.

https://codepen.io/ayandagatsha/pen/xxVVGyE are you able to see it now?

Okay, your CSS and HTML is pretty basic, but there are a few things. Hopefully this doesn’t add to your confusion.

TLDR: display:block is missing from the short code, so it’s not working.

With the top code, as @DanCouper said earlier, there are some redundancies. width:100%; isn’t needed, so I’ll skip that. Again, as Dan stated setting a max-width and height:auto will allow the image change according to its container. display:block +the margin properties allow the image to be centered in it’s parent which is <figure>.

An image can be responsive without display:block however, it’s helpful to change the styling to a block because images are inline elements by default and as result will not respond to certain styling commands (likemargin: auto )

PS - just using the shorter code (with the addition of display: block wouldn’t allow you to pass the test because the image still wouldn’t be centered. However, you could add margin:auto to fix that.

Thanks for the info. Its 4 am this side so will experiment again with that when the sun comes up to familarize myself with your reasoning. Thank you <3

You are the man, thank you!! Experimented with it, I get your explanations, and everything works.