Submitted over 3 years agoA solution to the 3-column preview card component challenge
responsive column page using bootstrap and css
bootstrap, express, react, tailwind-css, progressive-enhancement
@ugochianoka
Solution retrospective
i had a big problem in giving the whole row a border-radius. I had to individually give the columns the required border radius. If there's an easier way to do that, please comment below. Much love
Code
Please log in to post a comment
Log in with GitHubCommunity feedback
- @r-mayer
hey there! I think you did a nice job!
About the border radius, you can do this:
- since the 3 cards have a parent div (like a container), you can give the border-radius property to it, and add a 'overflow: hidden', so the container will "cut" the borders of the two cards in the sides. In this case, make sure the container will always have at least the same width and height of the children, or less. If for some reason, the container in your code is much bigger than the content inside, this will not work.
Marked as helpful
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