Submitted almost 3 years ago

3 Flexible and Responsive Card Page

Musha• 100

@mushamak

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

How to move svg on top left or right without adding any margin or padding? I tried with text-align: start , but it didn't work, so I simply added margin-right to display it on top-left.

Community feedback

Nishkarsh Dubb• 165

@Nishkarsh01

Posted almost 3 years ago

Try creating a responsive web-design. I notice that you've used display:flex on the main tag. Try changing the flex-direction to column to make the cards stack on top of each other in combination with media queries.

As per the svgs I think you've already found a solution to that.

Musha• 100

@mushamak

Posted almost 3 years ago

@Nishkarsh01 I changed two lines of code inside media query and added flex-direction: column, it worked. Thank you

Patrick• 14,325

@palgramming

Posted almost 3 years ago

remove the padding on the svg and assign a width to the svg and then you can use margin.

Musha• 100

@mushamak

Posted almost 3 years ago

@palgramming Got it, Thank you

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