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
Corey Sansola
490 PointsI cannot remove the bullet points from my photos and I can only get one column of photos instead of two.
/********* 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%; }
/********* Heading **********/
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; }
/********* 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: #6ab47f; border-color: #599a68; }
/* nav background on mobile devices */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47f; }
/* nav links */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
5 Answers
Andres Altuve
16,274 PointsHi Corey,
To remove the bullet points add the following attribute to your gallery li
gallery li { list-style:none}
At the end your code should look something like this:
gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
list-style:none; }
As for the creation of a second column, check out your images size, if they are 1 pixel bigger they will create a single column since there is not enough room to fit both images..
Laurence Foley
16,695 PointsThe list-style-type: none; rule should be in the Gallery li selector.
Corey Sansola
490 PointsWhy doesn't list-style-type: none remove the bullet points if I use the Gallery selector instead of Gallery li? Didn't the video use Gallery as the selector?
Laurence Foley
16,695 PointsBecause it's the li elements that have a default value of list-style-type: disc;. If you target gallery you will be targeting the ul element.
Corey Sansola
490 PointsBut isn't that default setting in the normalise.css document which is then overridden when we target the ul element which encompasses all the li elements?
Laurence Foley
16,695 PointsNo, it's the browsers default style-sheet that causes all li elements to display as a list-item. When you set the li elements to list-style-type: none; You are overwriting the browsers css style-sheet.
MUZ140896 Tadiwa Chokwenda
3,153 Pointsgallery li { list-style: none; }
always try to space your week to see your mistakes clearer, i always make that mistake!
MUZ140896 Tadiwa Chokwenda
3,153 Pointsi meant work there
rydavim
18,814 Pointsrydavim
18,814 PointsCould you share your workspace with us using snapshots? This will allow us to see a current version of your code and file structure in order to help figure out what might be going wrong.
You can share a snapshot by clicking on the camera icon in the top right of your workspace, and posting the resulting link here on the forums.