Submitted about 3 years ago

3-column preview card component solution

groudse• 25

@groudse

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I still have a lot of problems like the button not align. But i want to know how to manage the broder radius in the mobile view

Community feedback

Coureur12• 240

@coureur12

Posted about 3 years ago

You should learn about the BEM methodologie to name your classes. here is a link to learn more about it : http://getbem.com/introduction/

😉

groudse• 25

@groudse

Posted about 3 years ago

@coureur12 Ok thanks for this it would be better

Marko Nikolajević• 1,065

@MarkoNikolajevic

Posted about 3 years ago

Hi groudse

To manage the border radius on mobile you can add this code inside you @media part

.first {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 0;
}

.third {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-right-radius: 0;
}

You could use a shorthand property for the border radius border-radius: top-left-value top-right-value bottom-right-value bottom-left-value

As you said you still have to finish the mobile version of the challenge

Keep on coding and have fun! :)

groudse• 25

@groudse

Posted about 3 years ago

@MarkoNikolajevic Thanks for this ^^

Please log in to post a comment

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