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

Daniel Tangberg
Daniel Tangberg
1,506 Points
Posted by Daniel Tangberg
Daniel Tangberg
1,506 Points

Responsive 2 column pics problem

So I've changed the font size, the padding, margins etc for #gallery li a p{} Everything is working fine but the first pics paragraph which seems to cross the pic underneath it and making it disappear. I saw a solution to this posted in the forum that required additional code but as the video is not showing this issue and I haven't missed any further coding I'm curious to what the issue could be. Please excuse the CSS coding I'm posting now, I'll look in to how you can post in a better way after this.

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: #bdc3c7; }

Don't know if my HTML is required but here goes:

<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 Photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>80's and glows</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drops with brush</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Brushes are active or some other shit</p> </a> </li>

      </ul>

For some reason it isn't posting the top of the HTML but I have the the "gallery" id there in ul

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

To get a code block to show up correctly, follow these steps:

  1. first skip a line, then put three "backticks" (accent signs) followed by the code language (like html or css).
  2. place your code starting on the next line
  3. after your code block, put three backticks on a line by themselves.

Here's an example:

```html
<p>here is some HTML code</p>
```

Doing that looks like this:

<p>here is some HTML code</p>

1 Answer

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

:point_right: When targeting an ID in CSS, you have to put a pound sign (#) in front of it, like: #gallery.

Daniel Tangberg
Daniel Tangberg
1,506 Points
Daniel Tangberg
Daniel Tangberg
1,506 Points

Thanks for both replies Steven. Much appreciated.

I found out what the issue was. It seems the paragraph on the second pic (the one next to the 1st pic that moved over the 3rd pic and making it disappear) was too short. I added some words making that paragraph equal to the paragraph in the first pic and then everything worked out fine. I have no idea why but there you go. I noticed that when i centered my footer the pic that disappeared just moved under the 2nd pic as there were more room underneath it. Once I made that paragraph bigger in text I guess it didn't have a choice but to float to the left and then it worked.

Thanks for your help!