Skip to content
Submitted almost 2 years ago

Responsive 3 Columns Layout Done With Flex

KoliaK•160
@KoliaK
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I guess I'm having problems setting width/height/max-width/max-height and deciding wether I should use vh or % units for those. What do you usually do to make responsiveness keeping everything in ratio?

Code

Please log in to post a comment

Log in

Community feedback

  • Alper•1,090
    @adonmez04

    Hi, @KoliaK.

    That's a good solution. Keep coding.

    I know that units of measurement can be a bit confusing at first. There are so many types of units and they all work differently. I prefer to use px and rem first to keep everything simple. And you don't need to give any height values for your elements.

    In fact, elements take their width and height values from their content. They can be font-size, line-height, font-weight and padding&margin values etc. You can assign a max-width value for the container element and its child elements will grow and shrink depending on this value. Because the HTML itself is responsive. We can break its function if we give some width and height values from CSS.

    This concept might be difficult at first glance. But step by step, everything will make sense. I highly recommend Kevin Powell's course. I have learned a lot from this, it's free and easy to follow.

    https://courses.kevinpowell.co/conquering-responsive-layouts

    Unfortunately, there is no magic way to learn everything at once. You need to spend some time in the course to understand the fundamentals of the responsive design. However, it will be worth it.

    I hope this will help you. Keep coding and have a wonderful day.

    Marked as helpful
  • Alper•1,090
    @adonmez04

    And maybe this resource can help you to use devtools for mobile devices more efficiently: https://developer.chrome.com/docs/devtools/device-mode/

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