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
Sunshine Khawaja
1,845 PointsLast 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
8,841 PointsPlease 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
1,845 PointsThis is how I fixed it: @media screen and (max-width: 480px) { #gallery li:last-child { clear: left; } }
derekverrilli
8,841 PointsJust 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
8,841 PointsOh there you go :) Good job!
Sunshine Khawaja
1,845 PointsThanks for your help and the clarification!
Sunshine Khawaja
1,845 PointsSunshine Khawaja
1,845 PointsThanks 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
1,845 PointsSunshine Khawaja
1,845 PointsAnd 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.