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 trialNate Grant
23,695 PointsGallery photos not spaced right.
My gallery isn't functioning correctly. I have to images in my first row like normal. my second row however has 1 image displaying in the second row and can't display two? my third row displays correctly. Heres my code:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Nate Grant | IOS Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One: 400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nate Grant</h1>
<h2>IOS Developer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="https://itunes.apple.com/us/app/pong-8-bit/id978997066?mt=8">
<img src="appscreen1.png" alt="">
<p>App screenshot I made in photoshop CS6 for my new app.</p>
</a>
</li>
<li>
<a href="https://itunes.apple.com/us/app/pong-8-bit/id978997066?mt=8">
<img src="appscreen2.png" alt="">
<p>Another app screenshot I made in photoshop.</p>
</a>
</li>
<li>
<a href="code.png">
<img src="code.png" alt="">
<p>Code from an app I developed.</p>
</a>
</li>
<li>
<a href="flappy.png">
<img src="flappy.png" alt="">
<p>App assets I made in Sketch 3.</p>
</a>
</li>
<li>
<a href="Twitter-Header.jpg">
<img src="Twitter-Header.jpg" alt="">
<p>Created a Twitter header in photoshop.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nathangrant97"><img src="Img/twitter-wrap.png" alt"Twitter Logo" class="social-icon";></a>
<a href="https://www.facebook.com/nate.grant.980"><img src="Img/facebook-wrap.png" alt"Facebook Logo" class="social-icon";></a>
<p>© 2015 Nate Grant.</p>
</footer>
</div>
</body>
</html>
main.css
/************
General
************/
body {
font-family: 'Changa One', cursive;
}
#wrapper {
max-width:940px;
margin:0 auto;
padding:0 5%;
}
a {
text-decoration:none;
}
img {
max-width: 100%;
}
h3 {
margin:0 0 1em 0;
}
/************
Heading
************/
header {
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width:100%;
}
#logo {
text-align:center;
margin:0;
}
h1, {
font-family: 'Changa One', cursive;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.83em;
}
h2 {
font-family: 'Changa One', cursive;
font-size: 1.30em;
margin: -5px 0 0;
font-weight: normal;
line-height: 0.56em;
}
/************
Navigation
************/
nav {
text-align: center;
padding: 10px, 0;
margin: 20px 0 0;
}
nav ul {
list-style:none;
margin:0 10px;
padding:10px;
}
nav li {
display:inline-block
}
nav a {
font-weight:950;
padding:15px 10px;
}
/************
Footer
************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color:#ccc;
clear:both;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/************
Page: portfolio
************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin:2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin:0;
padding:5%;
font-size:0.753m;
color:#bdc3c7
}
/************
Page: About Me
************/
.profile-photo {
display:block;
max-width:150;
margin:0 auto 30px;
border-radius: 100%;
}
/************
Page: Contact
************/
.contact-info {
list-style:none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display:block;
min-height:20px;
background-repeat:no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../Img/phone.png');
}
.contact-info li.mail a {
background-image: url('../Img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../Img/twitter.png');
}
/************
Colors
************/
/*site body */
body {
background-color:#fff;
color:#999;
}
/* Green Header */
header {
background: #fff;
border-color: #fff;
}
nav {
background:#fff;
}
/* logo text */
h1, h2 {
color: #000000;
}
/* links */
a {
color: #000000;
}
/* nav backround on mobile. */
/* nav link */
nav a, nav a:visited {
color:#000000;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000000;
}
Nate Grant
23,695 PointsDemauri Portis clear: which property? both, none, etc.?
Demauri Portis
4,809 PointsI would assume its both, but you can always test all the values and see what you get. All the values for clear is: left, right, both, none, inherit. link : http://www.w3schools.com/css/css_float.asp
Nate Grant
23,695 PointsDemauri Portis yeah when my images are in there it shows three row, but the second column only show one image on the right. the first and third rows show 2 images while the 2nd row only shows one.
Demauri Portis
4,809 Pointsyeah, i just compared my code to yours from that course. Ours are exactly the same but my 5 pictures go 3 in the first row and 2 in the second row... weird
maybe you could try targeting the one thats out of position using something i learned later in the course.
galler li[href^="flappy"] { float: left; }
if flappy.png isn't the one in the row by itself. where i wrote flappy change it to either "code" or "twitt"
if that fails, then I don't know lol, tried my best
Nate Grant
23,695 PointsThanks Demauri Portis Thanks for the help I appreciate it! I'll figure it out somehow. it worked fine until I put in my own images...
3 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsI doubt it will fix the issue you're having, but you have a slight typo in your css (missing e
in em
for the font-size
value):
#gallery li a p {
margin:0;
padding:5%;
font-size:0.753m;
color:#bdc3c7
}
should be:
#gallery li a p {
margin:0;
padding:5%;
font-size:0.753em;
color:#bdc3c7;
}
Diamond Black
5,942 PointsI had the same issue with my code. Thanks to @lain Simmons I was able to fix it. Had the wrong number for font size. For #gallery li a p I had font-size: 0.75em; which is suppose to be font-size:0.753em;
Nate Grant
23,695 PointsYeah man! Thanks!
Nate Grant
23,695 Points@lain Simmons thanks dude! I'll try!
Demauri Portis
4,809 PointsDemauri Portis
4,809 PointsI believe you need to use the clear property within your css (gallery li) ~Hope it helped