Skip to content
Submitted 5 months ago

Responsive Layout using CSS Flex and Grid

mijeong•160
@snakechickensoup
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Using CSS Grid to Position Images within a Card

What challenges did you encounter, and how did you overcome them?

There were quite a few considerations for responsiveness. Additionally, many styles were guessed due to not knowing the exact element styles.

What specific areas of your project would you like help with?

I want to know how to create a responsive layout more efficiently. Currently, I am specifying elements in px units, but I want to understand whether I should use em, rem, etc., and how to utilize them effectively.

Community feedback

  • Filip Juszczak•690
    @filipjuszczakPosted 5 months ago

    When you set a container's height (body in this example), it's better to use min-height instead of height. In this case, you know how much content you'll have, but when you don't, setting a min-height won't cut out any content that doesn't fit on the screen.

    It's better to use relative units, such as em and rem, to set margins, paddings, font- sizes etc.

    Marked as helpful
    1
    mijeong•160
    @snakechickensoupPosted 5 months ago

    @filipjuszczak Thank you. This answer was really helpful to me.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord