Skip to content
Submitted about 4 years ago

3-column-preview-card-component-main CSS/Flexbox/Responsive

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

Solution retrospective

Really enjoyed my first challenge on frontend mentor, I struggled with getting the buttons to stick to the bottom of my containers as the text above grows/shrinks. The containers are not flex containers & I would rather not set them as so, as this breaks a lot of my code. Could somebody suggest a simple way of implement this so that the margin below the buttons is always consistent (e.g. they always line up horizontally). Thanks, Glen

Code

Please log in to post a comment

Log in

Community feedback

  • Rayane•1,935
    @RayaneBengaoui

    Hello Glen,

    Congrats for completing your first challenge ! 🙂

    Why don't you want to make your containers "flex" ?

    By adding display: flex, flex-direction: column, align-items: flex-start and justify-content: center I think it solves your problem ?

    Also, There is no need to add border-radius to your color classes as you can directly declare it on row. However, it will not work directly because the edges of row will be rounded, but the cards will overflow it and we won't see the change. To avoid this, you can also add overflow: hidden to your row that will not display everything that overflow the it.

    Lastly, you don't need special sections with color names. You could just combine classes to have container orange, container cyan and container darkcyan. It would simplify your code and make it easier to work with.

    Overall, well done for the challenge and happy coding ! 😃

  • Eddy Cerpa•145
    @edycerpa

    Hi Glen, I'm just starting with this type of challenges, and I'm a newbie, but I think i can help you with the buttons issue, you can use position:absolute; to your buttons, and position:relative; for their containers, then you can use bottom:15px for example and they will stick to the bottom of the container.

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