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

Responsive Card Preview with CSS Grid

Thendo 40

@Thendo-T

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


How should I make the borders of column 1 and column 3 round?

Community feedback

Andrew 380

@andreich1980

Posted

Hi there.

You can make border radius using border-radius CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Or, since you're using Tailwind CSS, use rounded-l-md for make left corners rounded, and rounded-r-md to make right corners rounded.

And you should put your sources to github as well, not just compiled result, this is the point of github, so anyone could clone your project, make changes and create a pull request.

Cheers.

Marked as helpful

0

Thendo 40

@Thendo-T

Posted

@andreich1980 Thanks I will Fix it as soon as I can. Will do

0
Thendo 40

@Thendo-T

Posted

@andreich1980 I have updated it. please check it. The previous results aren't being overwritten even when I made updates

0
Andrew 380

@andreich1980

Posted

@Thendo-T You can re-render the screenshot here, there's a button somewhere. But take care, you can only update your screenshots 5 times for free account.

0
Andrew 380

@andreich1980

Posted

@Thendo-T I checked your changes.

Here's my tip: since Tailwind CSS is mobile-first, you don't need to specify every screen size breakpoint like md:rounded-l-md lg:rounded-l-md lg:rounded-l-md is redundant here, it will make change once your screen size reaches md breakpoint, no need to specify lg breakpoint if the value is the same

Marked as helpful

0
Andrew 380

@andreich1980

Posted

@Thendo-T Found one more bug: when you hover just a border of a button - it changes bg color, but text color changes only when you hover the button.

You should update bg and text color only on the button, not on the div.

Marked as helpful

0
Thendo 40

@Thendo-T

Posted

@andreich1980 Okay thanks, I'll look into it

1
Thendo 40

@Thendo-T

Posted

@andreich1980 I have made the changes, thanks for the help 🙏

1

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