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 Make a CSS Image Gallery

Roxanne Lee
Roxanne Lee
2,612 Points

Text does not change to grey

I was able to float the images etc but I cant get the last one to work. Here is the relevant CSS

gallery {

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

gallery li {

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

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bcd3c7; }

Here is the relevant HTML

<ul id="gallery"> <li> <a href="img/numbers-01.jpeg"> <img src="img/numbers-01.jpg" alt=""> <p>Experiementation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpeg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop</p> </a> </li>

css/main.css
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

4 Answers

Hello Roxanne!!!

So your code should look like this:

Firstly:

img {
  max-width: 100%;
}

if you did that already.. cool. I just copy pasted and it wouldn't let me paste unless I selected the img tag.

Secondly: You need to select the id by adding the hashtag before it

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

Same thing here unless you'd like to hear gandalf the grey's famous last words.. "YOU SHALL NOT PASS" lol. -----sorry

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

I hope this helps!!

(PS if someone answers your question and it helps, get in the habit of giving those around you an "upvote" or a "Best Answer".

It makes them feel good, and you'll find you need them (upvotes and Best Answers) later on, and also -others may return the favor!!! )

Also... if you want to add code to a question or response in the forum, add of these "```" (the symbol above the tab key) before and after the code. (See Markdown Cheetsheet below input box)

for instance

```#wrapper { max-width: 940px; margin: 0 auto; padding: 0 5%; }

doesn't look like I want it to..

So I add "```" before and after the code to get this.

wrapper {

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

(if right after the first one you enter the type you get the color coding)

"```css" gives you this:

```css
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

++COOL HUH?++

Roxanne Lee
Roxanne Lee
2,612 Points

Super cool! Thank you! Lets test this out because unfortunately the issue is not fixed :( I had done the #, it just didn't show up.

"#gallery li a p { margin: 0; padding: 5%; font-size: 0.75em; color: #bcd3c7; }"

This is the bit thats causing trouble. The earlier code worked no problem which is why I am confused!

I'll include more of the html too...

"</header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpeg"> <img src="img/numbers-01.jpg" alt=""> <p>Experiementation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpeg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpeg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style</p> </a> </li> <li> <a href="img/numbers-09.jpeg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips creating using photoshop</p> </a> </li> <li> <a href="img/numbers-12.jpeg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </li> </ul> </section>"

Thanks for your help!

Roxanne Lee
Roxanne Lee
2,612 Points

Lets try again...

"" #gallery li a p { margin: 0; padding: 5%; font-size: 0.75em; color: #bcd3c7; } ""

""<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpeg"> <img src="img/numbers-01.jpg" alt=""> <p>Experiementation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpeg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpeg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style</p> </a> </li> <li> <a href="img/numbers-09.jpeg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips creating using photoshop</p> </a> </li> <li> <a href="img/numbers-12.jpeg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </li> </ul> </section>""

Copy and paste these 3 symbols before and after the code your inserting here, and it will solve the '# not showing up' problem: ``` (those three ticks before this)