Submitted almost 2 years ago

Single Price with Grid

Maulana Sobari• 50

@Justlana13th

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

this challenge is quite confusing for me. im unsure about the responsive design, but i think that's okay

Community feedback

Precious Aziken• 510

@Azikenp

Posted almost 2 years ago

Hi @Justlana13th. You did really great on your design, everything looks nice but your card isn't really centered on your screen. You can achieve this effect using flexbox. Set body tag to ("display:flex;" , "align-items:center;" , "justify-content:center;" , "min-height:100vh;") and you should be good to go.

Marked as helpful

Maulana Sobari• 50

@Justlana13th

Posted almost 2 years ago

Hello @Azikenp, your feedback is really helpful for me, really appreciate it, thankyou so much

Dicskson Owusu Nyantakyi• 270

@ondickson

Posted almost 2 years ago

Hi @Justlana13th 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

You should change your background-color to the figma design

background-color: hsl(204, 43%, 93%);

To make your card component centered. Add this code to the body.

body {
    font-family: 'Karla', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}```

Marked as helpful

Maulana Sobari• 50

@Justlana13th

Posted almost 2 years ago

Hi @ondickson, thankyou very much for the correction, really appreciate it. just updated the code and right now the component is already in a center

Please log in to post a comment

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