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

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Corey Sansola
Corey Sansola
490 Points

I 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; }

rydavim
rydavim
18,814 Points

Could 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.

5 Answers

Andres Altuve
Andres Altuve
16,274 Points

Hi 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..

The list-style-type: none; rule should be in the Gallery li selector.

Corey Sansola
Corey Sansola
490 Points

Why 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?

Because 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
Corey Sansola
490 Points

But 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?

No, 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.

gallery li { list-style: none; }

always try to space your week to see your mistakes clearer, i always make that mistake!

i meant work there