Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive 3-card-column

Albaโ€ข 70

@albscr

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,580

@correlucas

Posted

๐Ÿ‘พ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

@dazzlerabhi30800

Posted

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
Discord logo

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