Skip to content
Submitted over 3 years ago

Order summary component main, HTML, CSS, Flexbox

Nick Carlisi•180
@nickcarlisi
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

This is my second attempt at this challenge, implementing several small changes that were recommended when I submitted my first attempt. I added the box shadow on the 'proceed to payment' button (that I missed first time around) and added a 'main' tag for accessibility. I initially had an issue where the background image didn't seem to match the image provided. I figured out that I needed to add a background color AND the background image. My only issue now is that the margin around the "plan" section and the button seems too small. When I change the margin, nothing seems to happen. Any thoughts/suggestions? Thanks!

Community feedback

  • Anton•515
    @antaryaPosted over 3 years ago

    Hi Nick,

    Great start. It looks really good. 

    Regarding your question: you can fix it by removing the overflow: hidden; on the body tag. Also, use  min-height instead of height to allow body to grow when needed. The current solution with overflow: hidden; disables the scrollbar when needed. Check the description of hidden https://developer.mozilla.org/en-US/docs/Web/CSS/overflow.

    Also a couple of suggestions:

    • You may skip .hero-img border-radiuses if you add overflow: hidden; to .card class.

    • Check accessibility issues. It can be easily fixed by wrapping your content in the main tag. https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/

    • Minor differences compared to design - the background has a missing bottom wave and no shadow on the button.

    I hope this will be helpful.

    Keep up the good work!

    1
    Nick Carlisi•180
    @nickcarlisiPosted over 3 years ago

    @antarya Thank you for your help and suggestions! Much appreciated. I look forward to implementing these changes.

    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