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

CSS

Posted by garyclap
garyclap
1,240 Points

Media screen column positioning issues

Hi all,

I've had a search through the forum but can't find an answer to this issue. Any help would be greatly appreciated!

I've followed along with the first designing a website tutorial, and my site looks similar to the tutor's. However, when I reduce the browser window to it's smallest size (mobile view), the image gallery is not stacked correctly, and the third image sits on its own.

My site is here: http://web-be7tlq6110.treehouse-app.com/index.html

I tried to correct the problem in my main.css by clearing gallery list elements on every third instance - which worked - but then it messed up the wider non-mobile views!

I'm sure it's something simple that I've overlooked, but am tearing my hair out over where the problem lies!

Many thanks in advance.

1 Answer

Trent Gardner II
Trent Gardner II
24,098 Points
Trent Gardner II
Trent Gardner II
24,098 Points

Hi!

So you are right and need to clear the float, but one solution is that you can use a media query so the float is only cleared on the mobile version of the site.