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

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

Posted by Benjamin Ferguson
Benjamin Ferguson
2,955 Points

Gallery styling won't work

So I've entered the styling for the ul id "gallery" but it isn't making any changes. I made sure to put the id on the ul with the images in it. My css rules look exactly the same as the video. What could I have done wrong?

This is my HTML for the ul

<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 80s 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>

This is my css info:

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: %45; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

Suresh Raina
Suresh Raina
Courses Plus Student 205 Points

i think u forget #

#gallery {
margin: 0;
 padding: 0;
 list-style: none;
 }

#gallery li {

float: left; 
width: %45;
 margin: 2.5%;
 background-color: #f5f5f5;
 color: #bdc3c7; 
}

6 Answers

Suresh Raina
Suresh Raina
Courses Plus Student 205 Points 
img{
max-width:100%; //  instead of %100
}

and there is no need to give h1 height

Benjamin Ferguson
Benjamin Ferguson
2,955 Points

Oh my God I'm an idiot. Haha I messed up every percentage. I fixed them and now it's all working. Thanks so much you guys!

enes karaslan
enes karaslan
7,548 Points
enes karaslan
enes karaslan
7,548 Points

in the css file did you put # before id name?If don't it will solve your problem

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: %45; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

Benjamin Ferguson
Benjamin Ferguson
2,955 Points

Yeah I did, for some reason in here it made it look like a header but in my css it's like #gallery

enes karaslan
enes karaslan
7,548 Points
enes karaslan
enes karaslan
7,548 Points

in the #gallery li your width must be like this width: 45%;

Benjamin Ferguson
Benjamin Ferguson
2,955 Points

Oh okay, that helped a little bit but the pictures are still way too big and don't resize when I resize the window.

enes karaslan
enes karaslan
7,548 Points
enes karaslan
enes karaslan
7,548 Points

try this for that

img{ width:100%; }

Benjamin Ferguson
Benjamin Ferguson
2,955 Points

Hm, that helped a little but it didn't exactly fix the problem.

Here is my entire css code:

/************** GENERAL BS **************/

body { font-family: 'Open-Sans', sans-serif; }

a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

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; 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: #6ab47b; border-color: #599a68; }

/logo text/ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/nav background mobile devices/ nav { background: #599a68; }

/nav link color/ nav a, nav a:visited { color: #fff; }

/selected nav link color/ nav a.selected, nav a:hover { color: #32673f }

Suresh Raina
PLUS
Suresh Raina
Courses Plus Student 205 Points
Suresh Raina
Suresh Raina
Courses Plus Student 205 Points

i think max-width:100% will be better for fixing the image according to resolution

enes karaslan
enes karaslan
7,548 Points
enes karaslan
enes karaslan
7,548 Points 
          #gallery li img{
           width:100%
}
          ```
add this very bottom of your css.maybe its solve your problem