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 trialBenjamin Ferguson
2,955 PointsGallery 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; }
6 Answers
Suresh Raina
Courses Plus Student 205 Pointsimg{
max-width:100%; // instead of %100
}
and there is no need to give h1 height
Benjamin Ferguson
2,955 PointsOh 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
7,548 Pointsin 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
2,955 PointsYeah I did, for some reason in here it made it look like a header but in my css it's like #gallery
enes karaslan
7,548 Pointsin the #gallery li your width must be like this width: 45%;
Benjamin Ferguson
2,955 PointsOh 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
7,548 Pointstry this for that
img{ width:100%; }
Benjamin Ferguson
2,955 PointsHm, 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
Courses Plus Student 205 Pointsi think max-width:100% will be better for fixing the image according to resolution
enes karaslan
7,548 Points #gallery li img{
width:100%
}
```
add this very bottom of your css.maybe its solve your problem
Suresh Raina
Courses Plus Student 205 PointsSuresh Raina
Courses Plus Student 205 Pointsi think u forget #