Skip to content
Submitted almost 2 years ago

Order Summary Responsive Landing Page using CSS Grid

Benjamin Yee•20
@stmapman7
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Should some of the font sizes be larger or smaller (such as the "change" link in the annual plan)? How can I make this design more responsive and accessible following best practices? Additional feedback and input would be great! Thanks in advance.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <div class="card"> with the main tag . To center a content on a page, add min-height:100vh; display:flex; align-items-center: justify-content: center; to the body. change background-size of the body to cover. Give .card a width value, there is no need to give it margin:50px auto;, background-color: white and a color value Give .container a background-color: white , a color value, a padding value and there is no need for display: flex and it properties here. Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To y Hope am helpful Happy coding

    Marked as helpful
    0
    Benjamin Yee•20
    @stmapman7Posted almost 2 years ago

    Yes, this is very helpful. Thanks for your assistance @Hassiai! :-)

    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