3 Column Preview Card Component

for mobile, i see you already have a border-radius but it is only being applied to one side.

The issue is that your divs do not have a border. You must add a size to it using the border property. For example:

border: 1px solid transparent

after, you can change the border-radius size like you have done.

based on solution, the top div only requires a border-radius top & the last div to have only a bottom radius.

you can use the shorthand version (border) or use specific version:

top:

• border-top-left-radius
• border-top-right-radius

bottom:

• border-bottom-left-radius
• border-bottom-right-radius

for the paragraphs on mobile version, i suggest to just decrease the size and add a line-height.

hope this helps!

Hi this is my opinion.

Add separate classes to each card. For example ‘<div class="column sedans”>’ and so on for the rest. And when the screen is in mobile view, use the individual classes and add the ‘border-radius’ where necessary. Since there is no curve on the second element SUVS you make the ‘.sedans {border-radius: none}’