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.

CSS

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Last Image is being pushed out of the way due to wrapped text above at smallest browser size only.

When I resize my browser window to the smallest size, my last image gets pushed to the right because of the text wrapping on the image just above it. I have followed the advice to add this code:

gallery li:nth-child (3n+1) {clear: left}.

I'm still learning how nth-child works. How do I apply this to fix the 5th and last photo of my gallery? And since its only happening when I resize the browser to the smallest size, do I need to add the code into a media query targeting under 480px?

3 Answers

derekverrilli
derekverrilli
8,841 Points

Please post your full code for better help :)

This is the selector for the last child:

gallery li:last-child {
   /*Your styles here*/
}

What you posted starts at 1 and then selects every 3rd child after that.

gallery li:nth-child (3n+1)

Actually the +1 is unnecessary since by default it starts at 1. So this will do the same thing:

gallery li:nth-child(3n)

More than likely, yes, it does need to be within a media query but can't say for sure unless you post the code.

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Thanks for your help. I tried clearing the last image with the 'last-child' selector you mentioned but I think it needs to be nested in a different query that just targets under 480px. I'm not sure how to write that, so your help is greatly appreciated. Here's my responsive.css file:

@media screen and (min-width: 480px) {

/*************************************** CONTACT PAGE: TWO COLUMN LAYOUT ****************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/*************************************** PAGE: PORTFOLIO ****************************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(3n+1) { clear: left; }

/*************************************** PAGE: ABOUT ****************************************/

.profile-photo { float: left; margin: 0 5% 80px 0; } }

@media screen and (min-width: 660px) {

/*************************************** HEADER ****************************************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.0em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #4a4a48; margin-bottom: 60px; }

}

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

And I just deleted this from that code: #gallery li:nth-child (3+1) {clear: left;}, as it wasn't needed. Nick used it in the video for this project, but I just realized it didn't need to be applied in my case. The only issue I'm having is the last image in the small browser size.

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

This is how I fixed it: @media screen and (max-width: 480px) { #gallery li:last-child { clear: left; } }

derekverrilli
derekverrilli
8,841 Points

Just a correction: nth-child starts at 0 by default so for (3n+1) the +1 is needed to start with the first child. Sorry about that.

derekverrilli
derekverrilli
8,841 Points

Oh there you go :) Good job!

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Thanks for your help and the clarification!