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
Erin Clayton
3,840 PointsWhat's up with my code? Why are some of my images piling on top of each other?
Pretty much described phenomenon. Feel like this might have been from errors made in previous video..or something to do with the float?
5 Answers
Andrew Wiley
27,097 Pointsi might b a little late but you forgot to put
img { max-width:100%; }
under the general area in your CSS.
Erin Clayton
3,840 PointsThanks, dude. This helped a lot actually!!! Was stuck until this comment :P placed it @ top of CSS.. hope that is where it is supposed to go? 'Cause now the images are no longer on top of each other but the footer is now aligned right.. blahhh. But it's a step in right direction and I am forever grateful! Spock peace sign
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsWhat about adding
display: inline-block;
to your gallery li {} ???
Erin Clayton
3,840 Pointsdidn't work. placed on top and bottom of that rule.. nada. pretty sure it has something to do with the float and making it mobile-ready.
Sandro Meschiari
18,418 Pointsyou can add display:inline-block, or you can avoid to do a listed gallery and simply add the image from their source so they will be displayed in line and then with the float or with position:(absolute, relative) you can position them wherever you like inside the gallery.
Justin Rose
12,842 Points<code>
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }</code
this is what i have and its looks like you do to. if it doesnt work go a few videos back and redo the css.
Erin Clayton
3,840 PointsThe first four images are on top of each other in a side by side motion. Arrgh.
Erin Clayton
3,840 PointsErin Clayton
3,840 Points/*********** GENERAL ************/
body { font-family: 'Yanone Kaffeesatz', courier, arial; }
wrapper{
max-width: 940px; margin: 0 auto; padding: 0 5%;
}
a { text-decoration: none; }
/*********** HEADING ************/
logo {
text-align: center; margin: 0;
}
h1 { font-family: 'Yanone Kaffeesatz', sans-serif; margin: 15px, 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font size: .75em; margin: -5px 0 0; font-weight: normal; }
/*********** NAVIGATION ************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
/*********** FOOTER ************/
footer { font-size: 0.75em; text-align: center; padding-top: 50px color: #ccc; }
/*********** PAGE: PORTFOLIO ************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: f5f5f5; color:bdc3c7; }
/*********** COLORS ************/
body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile / nav { background: #599a68; } / logo text */ h1, h2 { color: #fff; }
/* links */ a { color: 6ab47b; }
/* nav links / nav a, nav a:visited { color: #fff; } / selected nav link / nav a.selected, nav a:hover { color: #32673f; } / site body */