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

CSS

Jonathan Kuro
Jonathan Kuro
7,758 Points
Posted by 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,148 Points
Kevin Korte
Kevin Korte
28,148 Points

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

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 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.