Looking to hire developers?
I ran into a problem with the border-radius. Starting at 1055px screen width it seems to flatten out and ends up looking like a regular box. I can't seem to find the source of this issue. Any help would be appreciated!
@darryncodes
Posted
Hi Daniel,
Nice one!
You might want to add transition: ease-in .3s; and cursor: pointer; to your button to have more of a button feel and smooth hover affect.
Marked as helpful
@o0oDanielHaroo0o
Posted
@darryncodes Thank you!
That's a great tip, will do!
well you you need to put the border raidus on the corners of your cards that need them
Put this on your orange card border-radius: 20px 0 0 20px;
then look at how the dark cyan card compares to the results on the orange
the key is you have to transition the border radius corners on the cards depending if it is the mobile or desktop layouts
Marked as helpful
@o0oDanielHaroo0o
Posted
@palgramming Hey, thanks for the reply!
Well yeah that definitely fixes it but I still don't understand why wasn't it working before. The father element ".card" of the columns does have the border-radius property and overflow hidden and it works just fine in smaller widths but when screen gets to 1055px it just starts straightening. I appreciate the solution but I don't understand what is the actual problem and why it happened.
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
