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

Card component with tailwind css

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


  1. on mobile design, interior rounded corners could not adjust to the design. They remained unchanged. top and bottom positions could take effect at the same time, rendering the top part with some margin from a parent while the bottom does not.
  2. How do I perfectly implement these challenges highlighted above?

Community feedback

@Jocad7

Posted

Hello @susiku, here is a solution for you.

delete the class with the name: "rounded-l-md".. it is unnecessary.

and add this to main, that is the container:

main { border-radius: 0.375rem; over-flow: hidden; //this property prevents content from leaking out of container }

One piece of advice, try to name your classes better. It is somewhat confusing to read a class like this :

<main class="relative grid sm:grid-cols-3 sm:m-auto inset-y-4">

sorry if my english is not very good... it is not my native language, I hope I have helped you.

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