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
Sophia Su
1,025 PointsDid not separate into 2 columns
When following the video exactly in Workspaces, the preview failed to have two columns of images like the video
Jason Anello
Courses Plus Student 94,610 PointsHi Sophia,
Can you post the css you added for this?
Sophia Su
1,025 Points/************************** GENERAL **************************/
body { font-family: 'Open Sans', sans-serif; }
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', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/************************** NAVIGATION **************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/************************** FOOTER **************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.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.75em; color: #bdc3c7; }
/************************** PAGE: ABOUT **************************/
.profile-photo { display: block; max-width: 150px; 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.facebook a { background-image: url('../img/facebook.png'); }
/************************* COLORS *************************/
/*site body */ body { background-color: #d0faee; color: #999; }
/* pink header */ header { background: #ffb6c1; border-color: #ffe1f0; }
/* nav background on mobile devices */ nav { background: #ee799f; }
/* logo text */ h1, h2 { color: #fff; }
/links/ a { color: #91219e; }
/* nav link */ nav a, nav a:visited { color: #d0faee; }
/* selected nav link */ nav a.selected { color: #d0faee; }
nav a:hover { color: #7fffd4; }
Christopher Quinn
9,943 PointsThe CSS looks correct, check your index.html file to make sure everything in the gallery is correct. Make sure all of your tags are correct as well.
4 Answers
Andy Swinford
8,152 PointsCan you provide which video you are experiencing difficulty with so we can better assist?
Sophia Su
1,025 PointsStyle the Portfolio
Jason Anello
Courses Plus Student 94,610 PointsNothing seems wrong for the gallery css.
I know this seems obvious but did you save the css and refresh the preview?
Did you double check your html to make sure you have the id set properly?
<ul id="gallery"> spelled correctly and all lowercase?
Sophia Su
1,025 PointsYes I did. I'll send you index.html as well ..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sophia Su | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Sophia Su</h1>
<h2>Designer</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 repitition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.facebook.com/SophiaCarolynSu"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="http://twitter.com/SophiaCarolynSu"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Sophia Su.</p>
</footer>
</div>
</body>
</html>
Jason Anello
Courses Plus Student 94,610 Pointshtml gets stripped out of the forums if not posted properly.
See this discussion for tips on how to post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum
Sophia Su
1,025 PointsResolved
Jason Anello
Courses Plus Student 94,610 PointsHi Sophia,
I'm glad you sorted it out. You may want to post what your solution was so others can benefit from it.
Sophia Su
1,025 PointsThere was no solution, for some reason when I logged on today, everything worked.
Andy Swinford
8,152 PointsAndy Swinford
8,152 PointsCan you provide which video you are experiencing difficulty with so we can better assist?