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 How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Sean Amador
Sean Amador
500 Points
Posted by Sean Amador
Sean Amador
500 Points

I'm stuck on the "How to Make a Website" Code Challenge "Add CSS that will allow all images to fill their parent element

I can't figure out what to do for the code challenge in "How to Make a Website" asking me to "Add CSS that will allow all images to fill their parent element." There there is no index.html to find out what the parent element was called in the code. I tried #gallery however it didn't work.

Thank you in Advance for any advice you can give.

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

3 Answers

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

The instructions mention "all images" in this case you don't have to have a class or id you can just use the img element selector like this:

img {
  max-width: 100%;
}
Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Sean, in order to target all images you use 'img', and to ensure they fill the parent element that they are contained in you set a max width of 100%, like so:

img { 
max-width: 100%;
 }

So say you set a div with a width of 500px, the image inside of this div will also be 500px

Sean Amador
Sean Amador
500 Points
Sean Amador
Sean Amador
500 Points

Got it thank you guys! I was referencing the #gallery tag used earlier.