Skip to content
Submitted about 3 years ago

Semi Responsive Order Summary Desktop Page.

Daniel Jansen van Vuuren•120
@DanielJvV
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

Hello everyone, I know, I could have done a few things better. Any comments or suggestions on how I could have done this better or made it more responsive would be greatly appreciated. Thank you in advance.

Also can someone tell me why my screenshot comparison is so much smaller than the design?

Community feedback

  • darryncodes•6,370
    @darryncodesPosted about 3 years ago

    Hi Daniel,

    Decent solution, pretty much nailed it!

    • you should add the following to get the background to match the design background-size: 100% auto; background-color: hsl(225, 100%, 94%);

    • you should research using relative units not absolute units for responsive design. This is an excellent best practice guide but it's just the tip of the iceberg

    • try this on your <body> to center everything nicely in the viewport

      display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
    Marked as helpful
    0
  • Amon•2,560
    @A-amonPosted about 3 years ago

    Hello! Seems like you didn't upload correctly. 🤔 Change your orderSummaryCard.html to index.html and recheck your file paths (css, image, etc.). For example, instead of "D:\Coding\Challenge_1\orderSummaryStyle.css", use "./orderSummaryStyle.css". Also, the images folder is missing. 😀

    Marked as helpful
    0
    Daniel Jansen van Vuuren•120
    @DanielJvVPosted about 3 years ago

    @A-amon Hello, Thank you for the help and advice! :) I think I've fixed it. It seems to be loading my page now, but the comparison still shows the read me file.

    0
    Amon•2,560
    @A-amonPosted about 3 years ago

    @DanielJvV Yep, that's normal! Good job on this one~ 😀

    I have few suggestions:

    • Set the background size to "100% 40%" (100% for width, 40% for height)
    • Set button's border to none and display to "block"
    • Set .inner width to "100%". Use padding to set inner spacing for the card. 🤔
    Marked as helpful
    1
  • Daniel Jansen van Vuuren•120
    @DanielJvVPosted about 3 years ago

    Hello, Thanks for the advice. I'll add your changes to my code and see the changes. I do know a little about flex, but it's been a while since I've coded CSS. I've been trying to learn JS. I'm planning on taking a flexbox/responsive challenge next.

    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