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

I don't know how to solve this Question "Add CSS that will allow all images to fill their parent element."

I don't know how to solve this question, can someone please explain what to do and why to do it. I don't want to just pass this question, I want to understand the problem too!

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

img{
  float: left;
  width:45%;
  margin: 2.5%;
  list-style: none;
  max-width: 950px;

}

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Hey Kevin,

I'm not sure why you are putting so many rules into the img tag, but you are way overthinking this one.

All the challenge wants is one rule that will allow it to fill the parent element. You do have to rule in there, just not with the right value, and the rest of the rules need to be deleted, because the challenge did not ask for any of them.

Because you pretty much have it, I will give the corrected rule, so you can see what I mean... and remember, challenges are very specific and very picky. If it didn't ask you to do something... don't. Because it will often result in a Bummer!

/* Task One: */

img {
  max-width: 100%;
}

max-width is just that. Fill to the maximum width available inside the parent. 100% means to the full width of the parent. 50% would mean only half the width of the parent... etc.

I hope this helps to make sense.

Keep Coding! :) :dizzy:

Thanks Jason for answering both of my questions! By any chance could you tell me what "parent element" means. Also I was stuck for quite long so I just started adding in CSS from my actual project that explains why there was list-style: none; float: left; width:45%;

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

A parent element is what is enclosing the element you are specifying (also know now as the child element). So if you have

<div>
  <img src ......... >
</div>

The <div> is the parent and the <img> is the child. As you nest further, you can develop even more 'relationships', but leaning all this will come soon enough. I don't want to confuse you with terms and relations that you haven't been introduced to just yet, but you will soon! :smile:

Even Mikael Sletten
Even Mikael Sletten
2,124 Points

You should be able to inspect your HTML file for this challenge.