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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Jonathan Vergara
Jonathan Vergara
589 Points

My 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.

http://port-80-ru0orucwwj.treehouse-app.com/index.html

2 Answers

Andrew Swift
Andrew Swift
6,600 Points

Hello 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.

Andrew Swift
Andrew Swift
6,600 Points

oops, 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
Jonathan Vergara
589 Points

This worked. Needed to add one break point because my third box kept on shifting right on the two column grid.

Thanks. Jonathan

Jonathan Vergara
Jonathan Vergara
589 Points

Thank you for your help. I will give it a shot later tonight.

Jonathan

Andrew Swift
Andrew Swift
6,600 Points

No problem, hope it helps.

Andrew