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 trialJonathan Vergara
589 PointsMy elements switch back and forth when resizing the window. need some help to figure it out.
I am not sure how to clear the elements when it's more than one element moving around when resizing the screen.
2 Answers
Andrew Swift
6,600 PointsHello Jonathon, I was having presumably the same problem, as I can't open your workspace to see your code, I'm not completely sure, but if this sounds like what was happening to you, try what I did. At certain points the 3rd element would get pushed to right, and at other times after fixing that, the 5th element was switching between the left and right sides as I resized the window. So what I did was create two new media queries at the top of my responsive.css file that look like this:
@media screen and (min-width: 390px){
#gallery li:nth-child(5n){ clear: left; } }
@media screen and (min-width: 400px){ #gallery li:nth-child(3n){ clear: left; } }
After adding this code, I no longer had any problems with any of the elements moving around while the screen size was under 480px. Although I did now have more issues once the screen got larger, which I was able to easily fix by adding a few more lines of code within the min-width: 480px media query that look like this:
#gallery li { width: 28.333333%; <<--- code you should already have if you were following along with the video }
#gallery li:nth-child(3n) { <<--- code I added to fix the new bugs clear:none; }
#gallery li:nth-child(4n) { <<--- code you should already have if you were following along with the video clear: left; } #gallery li:nth-child(5n){ <<--- code I added to fix the new bugs clear: none;
Obviously disregard the arrows and comments I made if you are going to try and copy and paste this into your workspace, I only added them to try and make it more clear where this new code goes.
Hope this helps, as it was enough to fix all the bugs I was having at all screen sizes.
Jonathan Vergara
589 PointsThank you for your help. I will give it a shot later tonight.
Jonathan
Andrew Swift
6,600 PointsNo problem, hope it helps.
Andrew
Andrew Swift
6,600 PointsAndrew Swift
6,600 Pointsoops, the way that got formatted, it's a bit confusing. the two new lines I added within the 480px media query are:
#gallery li { width: 28.333333%; }
#gallery li:nth-child(3n) { clear:none; }
#gallery li:nth-child(4n) { clear: left; }
#gallery li:nth-child(5n){ clear: none; }
Jonathan Vergara
589 PointsJonathan Vergara
589 PointsThis worked. Needed to add one break point because my third box kept on shifting right on the two column grid.
Thanks. Jonathan