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 trialRoxanne Lee
2,612 PointsText 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>
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
Joshua Harman
8,821 PointsHello 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!!! )
Joshua Harman
8,821 PointsAlso... 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
2,612 PointsSuper 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
2,612 PointsLets 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>"
"
Joshua Harman
8,821 PointsCopy 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)