Four Card Feature Section Using Grid

Community feedback

• 

  Andy•520

  @AndyAshleyPosted over 2 years ago

  Hey Adrianna, Good job on the challenge! I do see what you're talking about after the mobile breakpoint where it kind of squishes together until it gets wider. What you could do is give your main container a max-width until a mid way breakpoint where the content has enough room to do its 4 way layout. That way it doesn't stretch out too far while its waiting for enough room fully expand.

  Also I noticed at your 400px breakpoint you put a . before your main selector making it look for a main class instead of the actual main tag. The centering gets thrown off above 1440px. That can be fixed by simply adding display: flex with a justify-content: center on the body.

  I don't think it really matters what units you choose for your sizing of elements as long as they're consistent. percentages can act in weird ways sometimes so I would stick with something like px, rem, or ch (with text). em can change based on the parent containers text size.

  Hope that helps! if you have any questions feel free to ask me here :) Good job and happy coding!

  Marked as helpful

  0

  ---

  

  Adrianna Thomas•70

  @adrianna-thomasPosted over 2 years ago

  @AndyAshley Thanks for the feedback! It has been helpful. However, when I tried your suggestion of changing the max-width of the main container to a smaller value, it still appears squished before it fully expands. Do I have to adjust the sizing of the cards as well? Or do I add another media query?

  I named a class as "main" but I went back and updated it to "main-section" to eliminate any confusion.

  0