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

Posted by Cary Huang
Cary Huang
4,343 Points

Img {max-width: 100%;} doesn't work

I've typed everything the exact same way Nick did for his main.css file, but my images doesn't stretch or shrink to fit the browser. It just becomes really small blocks of images, which is not how it looks for Nick when he typed up his css file. Help?

Matias Valenzuela
Matias Valenzuela
7,554 Points
Matias Valenzuela
Matias Valenzuela
7,554 Points

I usually use width:100 instead of max-width

4 Answers

Douglas Miles
Douglas Miles
2,193 Points
Douglas Miles
Douglas Miles
2,193 Points

he gets his to look that way when he sets the properties and values on the gallery itself.. img { max-width: 100%; } will do nothing by itself except fill the current container with the image if the container is larger than the image... which it is not in the video you speak of so it does nothing. You have to make sure you do the parts later on in that video, check your syntext.. the 45% width on the #gallery is vital..

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Please post html & css code (see Markdown Cheatsheet for instructions).

Cary Huang
Cary Huang
4,343 Points

/******************************** GENERAL ********************************/

body { font-family: 'Times New Roman', sans-serif; }

wrapper {

max-width: 90px;
margin: 0 auto;
padding: 0 5%;

}

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******************************** HEADING ********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'Times New Roman', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************************** NAVIGATION ********************************/

nav{ text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; color: #fff; }

nav a { font-weight: 800; padding: 15px 10px; }

/******************************** FOOTER ********************************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/******************************** PAGE: PORTFOLIO ********************************/

gallery {

margin: 0;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;

}

/******************************** PAGE: ABOUT ********************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******************************** COLORS ********************************/

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* site body */ body { background: #fff; color: #999; }

/* nav background on mobile */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visted { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

Holly Nahar
Holly Nahar
2,496 Points
Holly Nahar
Holly Nahar
2,496 Points

I think your semicolon needs to be outside of your curly brackets..

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

When img { max-width: 100% } is used it is relative to the parent container (element) so you have to specify in the parent the size (px, em, %, pt, etc all work fine).

If there is no width, min-width, max-width set on the parent then img's max-width will not have anything to relate 100% to.

To recap, if you use 100% on practically anything it is relating to the same property of it's parent. So if the parent has no property of the same name set then the child's property is essentially 0 or the browser's default minimum for that property.

I have upvoted Douglas Miles' post as it's technically correct (the best kind) and I was hoping to elaborate.

Cary Huang
Cary Huang
4,343 Points

So what did he do in the video then? He never showed that he did anything for the parent container... How do you change the parent container anyways?