Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Posted by Jacob Wachsman
Jacob Wachsman
10,356 Points

max-width: 100%; is not working on Chrome

I am trying to add the max-width: 100%; property to my img selector in order to display an image relative to the size of my browser window. The problem is, when I try to resize the window, the max-width property has no effect.

5 Answers

lloan alas
lloan alas
17,774 Points

Here is a fiddle - take a look at that example, resize the bottom right window to see the image resize.

Jacob Wachsman
Jacob Wachsman
10,356 Points

Ah, thank you, I realize now that I put a semi-colon rather than a colon after the property name.

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Jacob,

Can you post your code?

Jacob Wachsman
Jacob Wachsman
10,356 Points

Here it is:

img {
  max-width: 100%;  
}
lloan alas
lloan alas
17,774 Points
lloan alas
lloan alas
17,774 Points

Jacob Wachsman - You're right. It should conform to the width of it's parent container. I'm assuming the code you pasted is only part of your full code?

Jacob Wachsman
Jacob Wachsman
10,356 Points

That is the full code, because I was just trying to control the image at the time.

Andrew Lim
Andrew Lim
8,004 Points
Andrew Lim
Andrew Lim
8,004 Points

I discovered the problem. If you look at the download final version the .primary-content, .secondary-content is set to 75%.

The video previously had this at 960px and if you missed it being changed to a percentage it would not of worked. I had the same issue.

If you change it, it should work.

.primary-content, .secondary-content { width: 75% padding-left: 50px; padding-right: 50px; margin: auto; max-width: 900px; }

lloan alas
lloan alas
17,774 Points
lloan alas
lloan alas
17,774 Points

Jacob Wachsman - have you set the actual width of the image to 100%?

Jacob Wachsman
Jacob Wachsman
10,356 Points

No, but I don't remember seeing that in the video, isn't the image supposed to be at 100% by default?