Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
216,121 Points
Steven Parker
Steven Parker
216,121 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
216,121 Points
Steven Parker
Steven Parker
216,121 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!