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
Elise Vatin
1,348 PointsAlso only getting one column
Hi, I seem to be stumbling upon the same problem others have before me: I only get one column and I can't find what's wrong with my code. Also, while fumbling around trying to fix it, my headlines and navigation elements are no longer centered, even though they used to be fine. Can you please help? I've also tried clearing the cache on Firefox between reloads, and have tried viewing the code in other browsers, nothing has worked. Also I can't figure out how to post a screen shot of my workspaces so I have to copy paste the code, sorry. Thanks so much!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tom Sawyer | Photography</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Tom Sawyer</h1>
<h2>Photography</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/tomsawyer"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/tomsawyer"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Tom Sawyer.</p>
</footer>
</div>
</body>
</html>
/**********************************
GENERAL
***********************************/
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
/**********************************
HEADING
***********************************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
}
/**********************************
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
***********************************/
/* site body */
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 link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
tootiemcflow
5,601 PointsHey Elise Vatin,
Could you create a Snapshot of your Workspace so that I may take a closer look?
Elise Vatin
1,348 PointsAh-hah! Thanks for the link, I hadn't caught that you're supposed to click on things inside the snapshot (I thought it was supposed to work like a screenshot and thought that mine just didn't work or something). Here is the snapshot of my code: https://w.trhou.se/m99dqjvqpb My problems are now different, again : still no margin between the two columns, the h1 and h2 elements are now centered but weird and not above each other, and the footer is now no longer at the foot of the page. It seems everytime I try to fix something, I mess up something else.
Jovanny Elias
16,204 Pointstake a look at how to properly add code on the forum. I edited your post. after the 3 back-ticks all you nee to write is the laguage name nothing else or it will not display properly. go ahead and press edit post at the bottom right corner of your post. You can see what I deleted to make it work.
Robby Faller also suggested you use snapshot which is an even better way to show us your code.
2 Answers
tootiemcflow
5,601 PointsOkay Elise Vatin, sorry for the wait I got side tracked with something else.
If you take a look in your main.css file under the page: portfolio section at the #gallery li selector. You should noticed that margin: 2.5; is missing a % unit. So, if you add that % symbol after 2.5 it should fix your layout.
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color:: #bdc3c7;
}
Elise Vatin
1,348 PointsThanks so much Robby Faller! And of course I don't expect you to answer right away... This did fix the layout problem for the columns, however my footer is still not at the foot of the page and my h1 and h2 are still wonky... is there anything I can do about that? (P.S. I just added this as an answer rather than a comment - can you delete my post that appears as an answer please?)
Elise Vatin
1,348 PointsThanks so much Robby Faller! And of course I don't expect you to answer right away... This did fix the layout problem for the columns, however my footer is still not at the foot of the page and my h1 and h2 are still wonky... is there anything I can do about that?
tootiemcflow
5,601 PointsHey Elise Vatin, I'm not sure how far along you are now, but it doesn't seem you've started working on the code to fix the heading/footer issues. I suggest watching these two videos Style the Image Captions, and Build Navigation with Unordered Lists.
Elise Vatin
1,348 PointsOh ok, I have in fact not watched those videos yet. Thanks so much for your help!
Elise Vatin
1,348 PointsElise Vatin
1,348 PointsOk I actually just solved part of the problem myself (I caught a curly bracket missing to close the img rule in the wrapper in css), but now I run into other problems: there are two columns but no margin between them (the images are stuck together) and the navigation elements are still aligned to the left. I think my code is identical to the videos - what am I doing wrong ?