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 Adjust the Profile Page and Header

Ellen Topitzer
Ellen Topitzer
1,205 Points
Posted by Ellen Topitzer
Ellen Topitzer
1,205 Points

Gallery images not aligning properly on mobile layout

Alright, so I have my responsive layout set up exactly as its shown in your video. For the most part all the elements line up and change accordingly to whatever size the screen is. The only problem I've run into is with my gallery section. Unlike the example website in the video, I have six images instead of five. When its in desktop or tablet mode I have two rows of three images that line up and are spaced perfectly. When I go to shrink it to mobile phone size, it turns into three rows of two. Here's the problem, on the last row the two images don't line up properly. One stays where it should be, while the other, jumps way down below it, as if its in its own row. I've tried everything I can think of to try and fix this, but nothing seems to be working. If I continue to shrink the screen down even more, it eventually lines up correctly. But, as soon as I expand it back just a little, it goes right back to that format. Any advice would be super appreciated, thank you!

1 Answer

Shani Connell
Shani Connell
26,307 Points
Shani Connell
Shani Connell
26,307 Points

Hey Ellen,

I'm still pretty new to this stuff myself but thought I would offer some things to try :) I had a play around with your code and think I might have solved the problem. Hopefully you have access to the workspace I worked in so you can see the code I added? Otherwise I'll paste some code here with an explanation.

I added this piece of code at the top of the responsive.css file before the first media query,

 ul li:nth-child(2n+1) {
    clear: left;
  }

I then set the first media query to 680px and the second to 760px and inside the first media query I set this code,

 #gallery li {
    width: 28.3333%;
    float: right;
  }

    ul:nth-child(3n) {
    clear: right;
  }

I also added this code at the very to of the file in a comment as this might be helpful later when you expand your project further,

/*
ul:after {
        content: " ";
        display: table;
        clear: both;
    }
*/

But like I said I'm still just learning and maybe there is a better way to fix this issue.. this is just what worked for me! Good luck with the project!

Ellen Topitzer
Ellen Topitzer
1,205 Points
Ellen Topitzer
Ellen Topitzer
1,205 Points

Hi Shani,

Thank you so much for your help and advice, I really appreciate it! I'm gonna try this out tonight and see how it goes. Again thank you so much!

Ellen Topitzer
Ellen Topitzer
1,205 Points
Ellen Topitzer
Ellen Topitzer
1,205 Points

Hi Shani, I tried using your code, and while it fixed some of the mobile aleinment issues, it actually created more problems for the desktop view. But thank you so much for trying to help, I really appreciate it! Still trying to figure out what's causing this problem, hopefully I'll find a solution soon