Skip to content
Submitted about 2 years ago

Responsive 3-card-column

Alba•70
@albscr
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

This is my third challenge and these are some of the problems I faced and I think I didn't solve them as I should have: -I didn't know how to align the three buttons to be horizontally equal (what I did was to modify the margin of each button). -In the last challenge I had problems with making the page responsive, according to me I did it but I received comments that it wasn't. I don't know if in this challenge I made it but I hope your comments about it (I check that it is for the different devices in chrome - inspect). -I eliminated the attribution at the end because I did not know how to position it below (it was on the container and I tried position without success).

I look forward to your always useful feedback thanks

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Alba, congratulations for your new solution!

    Your solution is perfect, the only thing you can change is the width for the col making it responsive instead of fixed column:

    .col {
    max-width: 29.33rem;
    padding: 3rem;
}

    Change that and you'll see the difference that the content adjust to fit the size.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
  • Abhishek choudhary•1,570
    @dazzlerabhi30800Posted about 2 years ago

    Congrats!!

    1. Use h1, h2 then h3 to take care of Accessbility Issues
    2. use border: 2px solid transparent; on .btn to fix the design shifting issue on hover! Thank you Namaste🙏
    0

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