Skip to content
Submitted over 2 years ago

HTML + CSS (Display Flex/Block and @Media)

Daniel Blum•170
@dnlblum
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

Things I had a hard time with:

  • I don't know why there are scroll bars (both horizontal and vertical);
  • Div's sizes when breaking the component into mobile screen;

Hope to get soe feedback.

Community feedback

  • Artur Neri•230
    @Artur-NeriPosted over 2 years ago

    Eai, Daniel!

    Eu não sei quanto a ser correto ou não, mas colocando margin: 0 auto; no body{} já removeria as barras vertical e horizontal.

    Marked as helpful
    1
    Daniel Blum•170
    @dnlblumPosted over 2 years ago

    @Artur-Neri Thanks Arthur, your tip worked perfectly.

    1
  • faizan•2,420
    @afaiz-spacePosted over 2 years ago

    Hey @dnlblum,

    • Remove width: 100vw; and Replace height: 100vh; with min-height: 100vh; in the body element.
    • Remove margin: 0 30%; and Replace `min-width: 650px; with width: 40rem; in the main element.
    1
    Daniel Blum•170
    @dnlblumPosted over 2 years ago

    @afaiz-space Thank you Faizan. Did not fully understand why, but it also worked. Thanks.

    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