Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Jonathan Kuro
Jonathan Kuro
7,758 Points

Another Layout Issue

Hi all. I'm running into a layout issue with this project that I cannot get my head around, would people be kind enough to look at my code?

Basically my layout breaks between 997px and 1024px. Clearfix doesn't seem to help, I feel like it's something basic that I've overlooked in my CSS.

Snapshot: https://w.trhou.se/bu491oclb7

Github: https://github.com/jonmcglade/Responsive-Layout-Project

1 Answer

Kevin Korte
Kevin Korte
28,109 Points

What breaks? It looked fine when I scaled it up or down.

Kevin Korte
Kevin Korte
28,109 Points

Alright, cool, thank you. I missed that somehow the first time.

I'm going to give you the bandaid fix, and than challenge you to refine your grid system so you don't have to use the bandaid fix.

What is happening at that break size is the text for the second card goes from 3 lines of text, to two. When that happens, it chokes up the total height of that card. When that happens, it wants to try to fit 2 cards floated left, but it can't because card #1 is taller than card #2, so because there is less space under card #1, so nothing is there. Card #3 is under card #2, and than things return to normal on card #4 and later because the cards are the exact same height.

The bandaid fix is the create a second media query between 997 and 1024 pixels, and give a .card p {min-height: 57px}. That is a very fragile bandaid fix.

The better solution will be to refine your grid to account for these kind of differences, like longer paragraph tags. Look at how some of the bigger frameworks handle this, like grid systems of Foundation, Bootstrap, etc, and than try implementing your own, so you can get rid of the media query I just told you to create.