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

3 column preview card component using CSS grid

Rina 100

@dodrin

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


Hi, this is my 3rd project on frontend mentor. I used CSS grid for the responsive design. Somehow I could not make the container rounded.

I appreciate your feedback! Happy coding🙌

Community feedback

@Njoura7

Posted

Hello, good job for this project You might want to read the comment below of @stijnmeershoek it's a good tip, And secondly you might add a position absolute for the buttons and postion relative for their parents and then add bottom:10px (that's what i did) so that the button stick in the same position no matter what is the size of the view. Hope it was helpful :)

0

Rina 100

@dodrin

Posted

@Njoura7 Hey thanks for your feedback. i tried the solution you suggested but the buttons ended up going outside of the cards. It would be nice if you could share your solution on your profile, so I can compare with mine. Cheers!

0

@Njoura7

Posted

@dodrin yess sure, i'll post it this night, I need to finish the documentation first

0

@Njoura7

Posted

@dodrin you can check my solution on my profile, it doesn't look exactly like the design but at least it can help you to fix to border radius & the position of your buttons :D

1
Rina 100

@dodrin

Posted

@Njoura7 Hey Thanks for sharing! I will have a look🙌🙌🙌

1
Stijn 460

@stijnmeershoek

Posted

To make the container rounded you would need to add a border radius, and then also add overflow: hidden to clip the content with the border radius. And to make overflow hidden work you need to specify a width and height. Example below

.container {
  width: your width;
  height: your height;
  overflow: hidden;
  border-radius: ?px:
0

Rina 100

@dodrin

Posted

@stijnmeershoek Hi Thank you for your comment. I tried it but it did not resolve the issue unfortunately. I really appreciate your help. Cheers

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