Skip to content
Submitted over 3 years ago

First Challenge FlexBox

Koyun92•330
@Koyun92
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

Hello everyone! This is my first challenge i do not even know what may i ask of...

Maybe do you see something i could do better, clearer? I am using SASS to explore it closer, know i should use variables here, it would be better, but i came up with it finishing challenge...

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Koyun92! 👋

    As you are familiar with flexbox there is no need to center horizontally and vertically your main element using position: absolute. On your .main element use these styles. Padding is to create some space from edges.

    display: flex;
flex-direction: column;
padding: 24px;

    And for your .main with media queries add these styles:

    flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;

    Good luck with that, have fun coding! 💪

    Marked as helpful
    1
  • Koyun92•330
    @Koyun92Posted over 3 years ago

    Thanks !

    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