Design comparison
SolutionDesign
Solution retrospective
- 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.
- How do I perfectly implement these challenges highlighted above?
Community feedback
- @Jocad7Posted about 2 years ago
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
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