Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

First Challenge FlexBox

Koyun92 330

@Koyun92

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
tediko 6,680

@tediko

Posted

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

@Koyun92

Posted

Thanks !

0

Please log in to post a comment

Log in with GitHub
Discord logo

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