Skip to content
Submitted about 3 years ago

3 column preview card component challenge using HTML, CSS, CSS float

Anh•90
@Taro2211
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

Hello everyone, this is my third challenge. I encountered more problems than I had thought but I still got them in the end. Also, I have some questions: How would you code 3 column layout such as this? By the way, is my code ok? What shoud I change to make it better?

Community feedback

  • Shreyas K R•60
    @ShreykrPosted almost 3 years ago

    I'd suggest to ditch the float and position stuffs altogether. You can do it entirely using flexbox.

    The body having flex row, the card components in flex row for desktop screens, and column when it's mobile.

    Instead of absolute position, you can give the content within each card as flex column. You can wrap the group the icon, heading and paragraph under an article tag (html semantic element) and button to have flex column.

    So, regardless of the amount of content within each card, the button in all 3 columns occupy the same position. Then you can give margin bottom or padding to adjust.

    Marked as helpful
    1
    Anh•90
    @Taro2211Posted almost 3 years ago

    @Shreykr Thank you, your feedback was so detailed. I'll probably redo the challenge later according to your method

    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