Skip to content
Submitted over 2 years ago

Order Summary Card Challenge

Tony•50
@Snorri967
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I struggled to begin with implementing the main background-color as i thought the Main element would auto resize the the max-width of the widest child and couldn't think why I had so much whitespace when I changed the background-color to white... Yeah my brain was running slow, so I put everything inside a container and messed with the margins which corrected that for me.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,870
    @AdrianoEscarabote

    Hi Tony, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

    1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

    2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

    Feel free to choose one of the two!

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
  • Candice•50
    @candiuk

    Hi, well done on completing the challenge.

    • Placing your 'Order Summary' as an H1 and 'Annual plan' as H2 will remove the accessibility warning issue you're receiving.

    • The 'Change' link should not need or have the <p> wrapping the text inside the <a>. Remove the <p> or swap them around.

    • To achieve the hover effects, add styling with :hover. eg: button:hover { add your style } Here's a link to MDN's docs that you may find helpful.

    Marked as helpful
  • Mounir KHAOUADI•190
    @Mounir-kh

    Hello, for background desktop : I did this and it worked: Html :

    <div class="background-desktop"> <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="437"><path fill="#D6E1FF" fill-rule="evenodd" d="M0 349.974c218.558 116.035 460.05 116.035 724.475 0s502.933-116.035 715.525 0V0H0v349.974z"/></svg> </div> CSS : .background-desktop{ position: absolute; display: block; padding-top: 30%; width: 100vw; margin-top: 0;

    } .background-desktop svg{ margin-top: 0; width: 100%; display: block; }

    Marked as helpful

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