# Understanding differences in code **URL:** \ **Category:** General\ **Created:** [August 14, 2020, 3:29pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355 "2020-08-14T15:29:32Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 3:29pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/1 "2020-08-14T15:29:32Z")
Why does: ```auto #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: ```auto #image { max-width: 100%; height: auto; } ``` ---
**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\ **Post date:** [August 14, 2020, 4:10pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/2 "2020-08-14T16:10:33Z")
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 ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 4:29pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/3 "2020-08-14T16:29:11Z")
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. ---
**Author:** ![CactusWren2020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cactuswren2020/32/144687_2.png) [@CactusWren2020](https://forum.freecodecamp.org/u/CactusWren2020)\ **Post date:** [August 14, 2020, 4:31pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/4 "2020-08-14T16:31:01Z")
try both with and without the display: block line ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 4:43pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/5 "2020-08-14T16:43:07Z")
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. ---
**Author:** ![CactusWren2020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cactuswren2020/32/144687_2.png) [@CactusWren2020](https://forum.freecodecamp.org/u/CactusWren2020)\ **Post date:** [August 14, 2020, 4:49pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/6 "2020-08-14T16:49:37Z")
Did you try what I suggested? ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 4:52pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/7 "2020-08-14T16:52:02Z")
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. ---
**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\ **Post date:** [August 14, 2020, 5:00pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/8 "2020-08-14T17:00:56Z")
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. ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 5:05pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/9 "2020-08-14T17:05:58Z")
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. ---
**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\ **Post date:** [August 14, 2020, 5:17pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/10 "2020-08-14T17:17:40Z")
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 ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 5:19pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/11 "2020-08-14T17:19:56Z")
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. ---
**Author:** ![JohnJohn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnjohn/32/135695_2.png) [@JohnJohn](https://forum.freecodecamp.org/u/JohnJohn)\ **Post date:** [August 14, 2020, 5:31pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/12 "2020-08-14T17:31:17Z")
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. ---
**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\ **Post date:** [August 14, 2020, 5:31pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/13 "2020-08-14T17:31:19Z")
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. ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 14, 2020, 5:33pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/14 "2020-08-14T17:33:35Z")
[https://codepen.io/ayandagatsha/pen/xxVVGyE](https://codepen.io/ayandagatsha/pen/xxVVGyE) are you able to see it now? ---
**Author:** ![JohnJohn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnjohn/32/135695_2.png) [@JohnJohn](https://forum.freecodecamp.org/u/JohnJohn)\ **Post date:** [August 14, 2020, 6:40pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/15 "2020-08-14T18:40:02Z")
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 `
`. 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 (like`margin: 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. ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 15, 2020, 1:59am UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/16 "2020-08-15T01:59:02Z")
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 ---
**Author:** ![ayandagatsha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayandagatsha/32/173884_2.png) [@ayandagatsha](https://forum.freecodecamp.org/u/ayandagatsha)\ **Post date:** [August 15, 2020, 4:32am UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/17 "2020-08-15T04:32:28Z")
You are the man, thank you!! Experimented with it, I get your explanations, and everything works. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 1, 2021, 6:43pm UTC](https://forum.freecodecamp.org/t/understanding-differences-in-code/415355/18 "2021-06-01T18:43:28Z")