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 column card, flexbox

@FilipSzkarlat

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


The biggest challenge was making the website responsive. Any comments on what I could do better are welcome.

Community feedback

@Blackpachamame

Posted

Hey your solution is amazing! 🤩

📌 I can only tell you a few things:

  • I think using position: absolute to keep the `buttons' always aligned at the bottom was a good idea, although I don't know if it is the best option, nor can I think of a better one right now
  • You applied height to the icons, this caused the aspect ratio of the image to be lost, you could leave it at height: auto or simply remove that property. The difference won't be much, but it would be the right thing to do.
  • If you set border: none to the button and apply a border to the hover, this usually causes the button to slide down a little in certain cases. In this case it is not appreciated by the position: absolute but you can see that it changes size. For this, you simply apply border: solid white 1px to the button without the hover, you will not need to apply it later

Marked as helpful

1

@FilipSzkarlat

Posted

@Blackpachamame thanks for the comment :)

I set the height only because with the default values (I don't know why) the icons were very large (195x122).

As for the border for the button, great comment, thanks a lot, I've already implemented it in the code.

Greetings Filip

1

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