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 Adding Breakpoints for Devices

Angel Jepsen
Angel Jepsen
1,230 Points
Posted by Angel Jepsen
Angel Jepsen
1,230 Points

nth child mobile layout issues

I used my own images and comments in my design as Nick suggested which makes things layout a bit different, I did use the nth child coding Nick recommended. It seems the layout is perfect in the main version but my responsive site ends up with the 5th image landing on the bottom righthand column because the comments for the righthand column are a bit shorter than the lefthand column. I've been reading through all of the comments on the other submissions about the nth child and just not seeing what I need to do.

Also, I can't figure out how to add a snapshot onto here.... looks like there's no way to copy/paste? This isn't really what I was expecting it to do but here it is... http://w.trhou.se/9f1m445m3l

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You might need to share your code for someone to be able to make concrete suggestions.

Remember you can share the entire project if you make a snapshot of your workspace and provide the link.

1 Answer

Cathy Villa
Cathy Villa
8,097 Points
Cathy Villa
Cathy Villa
8,097 Points

If 1 text is longer than the other the li padding in your normal CSS might be the issue and pushing it down. Play with your padding in your list. Remove it and test. If it fixes it you can go go back in, play with it and see how much it pushes down. You can also just play around with padding-bottom on the pictures.