Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Troy Fletcher
Troy Fletcher
2,814 Points

Need assistance with step

Add CSS that will allow all images to fill their parent element.

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

#wrapper {
  max-width: 940px;
  margin: 15px 0;
  padding: 0 5%;
}

#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;
}

2 Answers

Steven Parker
Steven Parker
221,864 Points

Okay, here's a few hints:

  • you need to make a new rule
  • you're styling images, so you probably want the rule's selector to target the IMG element tag
  • the property to cause something to expand but still be flexible is max-width
  • since you don't know the size of the parent, you may want to specify the value as a percentage

I'm betting you can get it now without an explicit spoiler.

I'm also on this and I have no idea what is going on. I'm really struggling to understand a lot of this CSS and feeling very demotivated to continue.

I don't even know what this question is asking me to do.

Maximillian Fox
PLUS
Maximillian Fox
Courses Plus Student 9,236 Points

Nick will have mentioned it in a previous video, the best thing I recommend is to go back to the previous ones and have a quick recap. Did you follow along on workspaces? If so the answer may already be in your css file :)

By 'fill their parent element' it means that the image will want to go as big as the element they are contained in.

For example

<div>
  <img src="someimage.jpg" />
</div>

The 'parent' of the img element is the div element. So if the image is naturally 300x300px and the div is 400x400px, if the image is at 100% of its size as a maximum, it will try to fill out the div. But if the div was resized to say 200x200px, if you set a certain css property on your img, it WILL go smaller as the div containing it shrinks.

Don't be discouraged, keep going and remember a website wasn't built in a day (or was that Rome? Hmm...)