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

Single price grid component with HTML, CSS, CSS Grid

Purbo 330

@Targitay2012

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I will be glad to any feedback!

Community feedback

Adriano 33,970

@AdrianoEscarabote

Posted

Hi Purbo, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

The rest is great!

I hope it helps... 👍

1

Purbo 330

@Targitay2012

Posted

@AdrianoEscarabote hi!

Thanks for the feedback. I know that the best way to center vertically is to use flex. In this challenge, I didn’t think that it needed to be centered like that, so I used the padding on top.

Best regards Purbo

1

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