Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Layout using CSS Flex and Grid

mijeong 160

@snakechickensoup

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@filipjuszczak

Posted

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

@snakechickensoup

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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