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

Article preview component master's Solution

@ericgalbarn

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Another solution from mine but the components seem to be ' too central ' i guess so you have to scroll down to see the final result ;)) Hope I'll get some of constructive feedbacks from you guys. Thank you so much in advance!

Community feedback

@LuisJimenez19

Posted

Hello, congratulations for completing this challenge.

If what you want is to center the card: you can use the following rules:

body {
    font-family: 'Manrope', sans-serif;
    max-width: 375px;
    /* margin: 100px 25px; */
    /* margin-top: 170px; */
    font-size: var(--fs);
    background-color: var(--clr_light_gray_blue);
    height: 100dvh;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

This way you don't have to play with the margin.

I recommend not modifying the <body> in the mediaquery but rather playing with the size of the card at the breakpoints.

I hope I have helped you, if you have any other questions let me know.🤗

Marked as helpful

1

@ericgalbarn

Posted

@LuisJimenez19 Hey Luis, thanks for letting me know. Much appreciate it bro ;))

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