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
Rigoberto Resendez
6,928 PointsHelp order images
Hello im an enrolled student on web desgin , right now i just published my webpage , but im having a problem with the 8th list item which skips to the next row , making the apparience of my webpage odd . I can't figure out yet why could it be . All the images are the same Height and Width . Do you think you can help me find a solution ? maybe using developer tools ? my webpage is http://www.rigoresendez.com
3 Answers
Sean T. Unwin
28,690 PointsThe root cause of this is that your first <li> in the #gallery (the one with the mime image) has more text than all the others which is pushing the display downward.
The issue is there is no height property on the #gallery li so they simply adjust to the content and since they are not a uniform height the breakage occurs.
To fix this, add a set height property to #gallery li. You will have to create a few more breakpoints in responsive.css for this to display correctly in all devices, however. The code below will have 2 centered columns of the gallery in small displays and 3 centered columns for tablets and larger. Change the width in the breakpoints to your liking if you wish.
You need to remove the clear: left on the two elements that you added them. I also removed #primary and #secondary as you were not using them.
See the code below of my edits to your main.css and responsive.css:
/* main.css */
body {
/* Give a max width for extra-wide screens and keep things centered */
max-width: 1080px;
margin: 0 auto;
}
#gallery li {
width: 30%;
height: 17em; /* this important for larger screens */
}
/* responsive.css */
@media screen and (min-width: 360px) and (max-width: 800px){
#gallery li {
height: 14.5em;
}
}
@media screen and (min-width: 360px) {
#gallery li {
width: 28%;
}
}
@media screen and (max-width: 360px) {
#gallery li {
width: 45%;
height: 14em;
}
}
@media screen and (max-width: 320px) {
/*******************
PAGE: PORTAFOLIO
******************/
#gallery li {
width: 44%;
height: 13em;
max-height: 14em;
}
/*******************
PAGE: ABOUT
******************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
} /* I think you were missing this bracket originally */
@media screen and (min-width: 660px) {
/*******************
HEADER
******************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align:left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599aff;
margin-bottom: 60px;
}
}
Have fun and good luck! :)
Chase Lee
29,275 PointsTook out the clear:left for the last img and added a class to the fourth list item to give it it's own clear:left.
Hope that helps and make sense.
-Chase
Rigoberto Resendez
6,928 PointsThank you i have solve the problem with your help :)