Skip to content
Submitted over 2 years ago

So i used HTML and CSS for make this layout.

Gabriel Francisco•130
@gab9244
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The most problematic thing for me was centralizing the layout, I used margin but I don't think that's the right way to do that and also I'm not used to using box-shadow and border-radius.

Community feedback

  • Juan Bonilla•610
    @juanpb96Posted over 2 years ago

    Hi Gabriel 👋.

    Good job on your solution! I think you can solve your problem centralizing your content differently. Have you tried grid? ... If you want to, add a new parent container for your main content (or using your body tag works too). This new element should take 100% width and 100vh heigth. Lastly, add place-items: center and that should do the work. Don't forget to remove those margins to avoid horizontal scrolling 😉

    Marked as helpful
    1
    Gabriel Francisco•130
    @gab9244Posted over 2 years ago

    @juanpb96
    thank you very much for your instructions, with them I was able to solve my problems.

    0
    Juan Bonilla•610
    @juanpb96Posted over 2 years ago

    @gab9244 You're welcome! 😃

    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