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
James Simmerman
1,385 PointsHaving trouble getting the "float" element to display my images side-by-side.
Having trouble getting the "float" element to display my images side-by-side. I'm working on a mobile site and have entered the CSS code list:
/***************************************
PAGE PORTFOLIO
***************************************/
#Gallery {
margin: 0;
padding: 0;
list-style: none;
}
#Gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
5 Answers
James Simmerman
1,385 PointsI used a couple of my own pictures in this project, that were not sized in the same manner as the ones that came with the project img folder. Could this be what is causing my problem?
Yoghanand Gabriel
4,240 PointsJust follow along the course, towards the end nick will teach you how to tackle this issue, while coding for desktop and tabs.
Ok let me tell you how to resolve this issue while coding for mobile devices. In mobile devices every row is filled with two portfolio images, hence the 3rd image has to move properly to the next row, to achieve this you need to include the following code on main.css
#gallery li:nth-child(2n+1){ clear:left; }
:nth-child(2n + 1) will select every 2nd item plus 1. In other words, this will select the 3rd item, 5th item, 7th item, and so on.
Ok now the problem is solved with mobile devices, same problem might arise while coding for desktop or tabs, in desktops and tabs each row is filled with three portfolio images, hence the 4th portfolio image has to move properly to the next row, hence you will have to add the following code in responsive.css, encapsulated within @media screen and (min-width: 480px) { }
#gallery li:nth-child(2n+1){ clear:none; }
#gallery li:nth-child(3n+1){ clear:left; }
Jason Anello
Courses Plus Student 94,610 PointsYoghanand Gabriel , you have the right idea but those are not the correct :nth-child() expressions.
See this thread:
https://teamtreehouse.com/forum/how-to-make-a-website-build-a-three-column-layout
Yoghanand Gabriel
4,240 PointsYou are right Jason Anello, I have corrected the above code. thanks.
Jason Anello
Courses Plus Student 94,610 PointsHi Yoghanand,
You're welcome.
:nth-child(2n + 1) would actually select the 1st item as well. So, 1st item, 3rd item, 5th item, 7th item, and so on. I find it easier for me to look at the expression from right to left. Select the 1st item, and then every 2nd item after that.
In this case, we don't need to clear the 1st item but it doesn't hurt to do it.
if you wanted to exclude the 1st item you could use :nth-child(2n + 3). That would select the 3rd item and then every 2nd item after it.
Yoghanand Gabriel
4,240 PointsYes Jason Anello, you are right, Your explanation is perfect. Thanks.