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 trialRyan Schmelter
9,710 PointsGallery 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?
Ryan Schmelter
9,710 PointsMy 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
14,607 PointsLooking 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
9,710 PointsThanks. 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
14,607 PointsHmmm, 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.)
Natsu Dragneel
5,775 PointsNatsu Dragneel
5,775 PointsCan you post your code? It will make it easier to diagnose what the issue is.