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
Quentin Silvestre
1,267 PointsNth children conflict
I'll try to explain my problem properly, but since i'm not a native english-speaker it might seems strange or confused.
So, like in the video i had an issue with the fourth image and the caption. The given solution worked perfectly.
But at a lower resolution (<480px) i had another conflict with the third image which wouldn't align under the first because of my custom text. So i did this in main.css in the portfolio section:
gallery li:nth-child(3n){
clear:left;
}
It worked and it was great. Problem is : when the site is in larger mode (>480), it logically stays that way, with the third image going to the next line and then the fourth going to the next lign.
The problem is that obviously the 3n command is not replaced by the 4n command when i enlarge the site. They both are applied.
How can i make the 3N one disappear at larger sizes in profit of the 4n one ?
3 Answers
Ryan Gordon
1,340 PointsThis should all be done in the responsive.css file. There, if you follow Nick Pettit
{ clear:none; }
This should remove the clear:left you put in for smaller screen sizes.
Ryan Gordon
1,340 PointsCouldn't edit my bad markdown, try this:
'''css @media screen and (min-width: 660px){
#gallery li:nth-child(3n) {
clear:none;
}
}
'''
Quentin Silvestre
1,267 PointsThanks Ryan ! For some weird reason, in my head the n4 code i typed was bound to replace the n3 code of the original page. It obviously did not. And now it works with your fix !
Thanks again for taking time to respond !