Skip to content
Submitted about 2 years ago

3-column card component with FlexBox

GeorgeBryzh•80
@GeorgeBryzh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

So, I find difficult when made code to increase distance between descriptions and edge in the Sedans part. I payed attention on Sedans card, cause him length is unique. Firstly, i decided to decrease padding here. But card size stay to be dependent from padding, despite i use box-sizing: border-box. So then i just changed margin-left on description, a here is didn't require to change size of entire flex-card again.

I have a questions about how to change into flexbox padding of 1 element, keeping it for same size. Because box-sizing: border-box doesn't help for element of flex-container. And how to stop elements to exit outsite parent's borders corners when its border-radius has been changed. Without changing border-radius of childs

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi,

    You did a good on the challenge. To center the card horizontally instead of justify: space-around on the body use justify-content: center and on the card on mobile just a flex-direction: column to the .card to stack the columns.

    1

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