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 Responsive Web Design and Testing Website Testing

Ryan Schmelter
Ryan Schmelter
9,710 Points
Posted by Ryan Schmelter
Ryan Schmelter
9,710 Points

Gallery images aren't stacking correctly on narrow screen / mobile version.

Images are stacking as follows on narrow screen: 1 and 2 look normal on top. 6 is by itself and aligned right in the middle. 9 and 12 are stacked side by side on the bottom.

Can't find an issue in the code. I have the #gallery li floated left. Any ideas?

Natsu Dragneel
Natsu Dragneel
5,775 Points

Can you post your code? It will make it easier to diagnose what the issue is.

Ryan Schmelter
Ryan Schmelter
9,710 Points
Ryan Schmelter
Ryan Schmelter
9,710 Points

My code is below. Thanks. CSS: /******* Page Portfolio *********/

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; }

HTML:

<section> <ul id="gallery"> <li> <a href="img/numbers-01.jp"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with colors and texture</p> </a> </li> <li> <a href="img/numbers-02.jp"> <img src="img/numbers-02.jpg" alt=""> <p>Blending Modes</p> </a> </li> <li> <a href="img/numbers-06.jp"> <img src="img/numbers-06.jpg" alt=""> <p>80's Style</p> </a> </li> <li> <a href="img/numbers-09.jp"> <img src="img/numbers-09.jpg" alt=""> <p>Creating Shapes</p> </a> </li> <li> <a href="img/numbers-12.jp"> <img src="img/numbers-12.jpg" alt=""> <p>Texture Coating</p> </a> </li> </ul> </section>

1 Answer

Umar Ghouse
Umar Ghouse
14,607 Points
Umar Ghouse
Umar Ghouse
14,607 Points

Looking at your code, you've missed the # symbol before the term gallery. Your code should look something like this: (Note the # symbol before the word gallery - #gallery)

In order to select an element by id, it must be referenced by the # symbol.

#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; 
}
Ryan Schmelter
Ryan Schmelter
9,710 Points
Ryan Schmelter
Ryan Schmelter
9,710 Points

Thanks. It doesn't seem like that's the problem though. For some reason, the # aren't pasting when I put in the code.

Umar Ghouse
Umar Ghouse
14,607 Points
Umar Ghouse
Umar Ghouse
14,607 Points

Hmmm, I tried reproducing this on my own workspace, but couldn't get the same error. Could you share your workspace? (If you open your workspace, there should be a button on the top-right that says "snapshot workspace"), you can use that to share it. That would help in diagnosing this :)

Also, in future, consider using the "Markdown Cheatsheet" when posting to the forum, so that we can see your code more clearly (it would also probably allow the # symbols to be shown as well - for example, when posting code, add a ``` before and after the code sample.)