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!

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

Jahan Zeb
Jahan Zeb
11,169 Points
Posted by Jahan Zeb
Jahan Zeb
11,169 Points

My galley for mobile is skipping spots

Following along a tutorial and doing exactly what's been told but can't get my gallery items in a flow.

Reason: probably the text above the missing spot is wrapped to the next line while for every other item, it did not! I know I can cheat and reduce the text on first gallery item or add some text to all other items but this is not how I want to fix this!

!How it is appearing

Here is the code I am using in CSS:

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #cccccc;
}

for the paragraph i have:

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;

Any help will be appreciated!

3 Answers

David Bilson
David Bilson
13,819 Points

I had the same problem as you are having with the gallery / portfolio page and it was resolved for me by Jason Anello in this post:

https://teamtreehouse.com/forum/how-to-make-a-website-build-a-three-column-layout.

Jahan Zeb
Jahan Zeb
11,169 Points
Jahan Zeb
Jahan Zeb
11,169 Points

Fixed it!

added paragraph height!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Trying to control the height of the paragraph would not be a good solution. Text could overflow the container and you could end up having images in the next row overlapping with text in the row above.

If you follow the link that David Bilson mentions you'll see that it's also happening on the 3 column layout. David has the solution on that page for the two column layout.

Jahan Zeb
Jahan Zeb
11,169 Points
Jahan Zeb
Jahan Zeb
11,169 Points

Thanks a lot David Bilson and Jason Anello, this really helped resolving the issue and learned how to do this properly!