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
Faith Pena
4,025 PointsPortfolio isn't splitting into two columns - what's wrong with my code?
I've gone through most of the questions here and none of the answers have helped my issue. I'm posting the question yet again and hoping there's an answer for my code!
<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>
and my CSS code:
/*******************
GENERAL
*******************/
body {
font-family: 'Open Sans' , sans-serif;
background-color: #545345;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*******************
PAGE: PORTFOLIO
*******************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
My "gallery" above DOES have a hash in front of it (as does #wrapper). Idk why it's not showing up here.
I'm unsure if this links to the code I've been working on. I've seen some people link their workspace and not sure if this is how I do it: https://teamtreehouse.com/workspaces/13205582
Thank you!
8 Answers
Max Kutner
7,595 PointsNo worries, Faith!
Try lowering the value of the width as well. Remember to factor in the margins and padding that are part of the browser window by default.
Keep the block display rule in the #gallery li.
Max
Max Kutner
7,595 PointsMake sure to declare the display in your gallery items to 'block'.
Hope this helps!
Max
Faith Pena
4,025 PointsI'm so sorry - I don't know where to put 'block.' (display: block; ...like that?) I didn't see him do that in the video...
I tried putting 'display: block;' under my #gallery then #gallery li but it didn't seem to work.
Sorry I'm a newbie - just started this all on Monday.
Faith Pena
4,025 PointsUgh still no luck :(
Changed it to:
gallery li {
display: block; float: left; width: 25%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
I experimented and took out the "margin" and also adjusted the "width" between 0-99% and checked this code out in Safari, Chrome, and Firefox. It still doesn't work.
So far not a fan of CSS haha. I'll keep trying variations tho.
Max Kutner
7,595 PointsTypically, I don't use floats unless I want to have specific items in each column. In your case, you just want gallery items to display in rows of two. If you remove the float property and set the margin to around 40%, the list items should show up as you wish.
Otherwise, you'll need to declare divs which represent the two columns and place specific items inside the divs which you want to display.
In this case, you're just looking to have the gallery items 2 at a time side by side without necessarily having a specific preference for which items on the left and the right.
Lemme know if this works!
Faith Pena
4,025 PointsThanks so much - will do! I'll have to try this later on tonight. I appreciate the help!
Max Kutner
7,595 PointsNo problem, Faith! Keep at it. It gets easier!
If my answer gives you the desired effect, please upvote it.
Thanks, Max
Faith Pena
4,025 PointsRich Bagley Wow it's like magic! I was going crazy earlier and watched the video at least 10xs but realized it might be a browser issue as I tried changing background colors, text, other misc code colors and nothing changed after a refresh. Right now I see 2-columns and tried changing the background back to white again, but it seems to be stuck on black. I tried changing some text and that's not changing either. I cleared Firefox history and still no luck. Do you know why my edits aren't showing up?
I'm not very technical or computer savvy (resolution for 2016!).
Thanks for that code! I looked at my question again and saw the change you made. I'll use that next time as I'm sure there'll be plenty of next times.
Rich Bagley
25,869 PointsHi Faith,
No problem :) It sounds as though it could still be caching for you and so not not showing the latest version. You could try hard refreshing the page using Ctrl + F5.
If that doesn't work, one thing you could try is copying your HTML and CSS in to a new pen on CodePen (+New Pen button in top right of home page). There are boxes for HTML, CSS and JavaScript. Paste the code in the right box and the bottom box will display the finished product.
Hope that helps :)
-Rich
Faith Pena
4,025 PointsThank you both for your help! It's really appreciated from this newbie!
Great tools to know about! I'll definitely be utilizing that!
Rich Bagley
25,869 PointsNo problem! Glad you got it sorted :)
-Rich
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi Faith,
I've just updated your question so it should display the HTML and CSS as you see it (with the #). To do this in future, add 3 backticks (```) on the line before and the line after your code. You can add a language to the top line after the backticks if required (e.g. html).
Also, can you confirm the issue please as I have just taken your HTML and CSS and dropped it in to a new pen on CodePen and everything was displayed in two columns?
Thanks
-Rich