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

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

Troy Fletcher
Troy Fletcher
2,814 Points
Posted by 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
231,236 Points
Steven Parker
Steven Parker
231,236 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.

Unsubscribed User
Unsubscribed User
Courses Plus Student 3,156 Points

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
Maximillian Fox
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...)