Skip to content
Submitted almost 3 years ago

3-Column Preview Card | Mobile-First, SASS, Grid

shuberber•230
@sheronimo
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

Hi everyone! I didn't struggle much with this component, but once again please let me know If I overlooked anything.

In terms of responsive layout, I set the breakpoint for the cards to stack horizontally at a large screen size (1024px). I found the horizontal layout a little too narrow for my liking at medium screen size (768px), hence why I kept it stacking vertically. I don't have a great eye for design itself, so I'd appreciate any advice/feedback on the layout at medium resolutions. 🌹

Community feedback

  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    Congratulation complete the challenge: My Suggestion

    Used this code want your card in center position :

    in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

    in Card Design CSS Code used this property: align-self: center;

    1
    shuberber•230
    @sheronimoPosted almost 3 years ago

    @GitHub-dev12345 Thanks for the tip, Dev! ☺️

    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