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
Rachel Schmidt
549 PointsWhat is a parent element? I do not understand what this question is asking me to do. Please help!
I am looking at my CSS coding notes from the previous two videos. I tried typing all of the #gallery edits that Nick showed us but keep getting the wrong answer indicating I did not add a width to the image? I do not understand what a parent element is to answer this code challenge question. Please advise. Thank you!
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;
}
4 Answers
Wayne Priestley
19,579 PointsHey Rachel,
I could never take notes, i used to miss everything that was going on while i was taking notes.
Okay, a parent element is like this:
<div class="text">
<p>Some text here</p>
<a href="some-url">Link</a>
</div>
So the parent element of p or a would be the class text .text because those two tags are inside the div called text
Let me know if I'm making sense to you, okay.
If you paste what the code challenge is asking you to do, we'll get you sorted in no time.
Rachel Schmidt
549 PointsHi Wayne,
Thank you for the speedy response! I figured it out haha.
The code challenge was "Add CSS that will allow all images to fill their parent element."
So I did a little research and discovered the answer was img { max-width: 100%; }
The only thing is I don't really understand why. Any explanation is greatly appreciated! :)
Wayne Priestley
19,579 Pointshehehehe,
I'm not sure what your getting at, do you mean why would you want to fill the parent element or is it a question about the parent element its self.
Rachel Schmidt
549 PointsI don't understand why the answer was img {max-width: 100%} for the question.
How does that specific line of code "allow all images to fill their parent element"??
Wayne Priestley
19,579 PointsNow I get you.
It has a lot to do with your image being responsive to different screen sizes.
That piece of code makes sure the picture is displayed at 100% and no bigger, so it can't expand to the point that some of the picture is off the screen.
Thats it really.
Rachel Schmidt
549 Pointsahhhh ok! That makes sense. Thank you for your help and taking the time to clarify this question for me! Very much appreciated :)
Wayne Priestley
19,579 PointsNo problem Rachel,
It would also mean that if you had a section of your website like a box, and you gave it a width of 50% of the websites width (450px for example) if you had your image in that box and its set to max width 100%.
If someone were to shrink their browser down to 500px wide, your box would now be 250px (50%) but even though your image might be 500px wide as well, it would be contained within that box with the width of 250px.
I think i explained it better that time.
Good luck with the rest of your course.