Skip to content
Submitted over 3 years ago

3 Flexible and Responsive Card Page

Musha•100
@mushamak
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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
    @Nishkarsh01Posted over 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.

    1
    Musha•100
    @mushamakPosted over 3 years ago

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

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

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

    1
    Musha•100
    @mushamakPosted over 3 years ago

    @palgramming Got it, Thank you

    0

Please log in to post a comment

Log in with GitHub

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