Skip to content
Submitted about 2 years ago

Order summary component

César Morán•60
@CiMorann
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

There's an issue with the background, at the beginning when I placed it, the background worked well with the colours and then out of a sudden it changed to white instead of similars blue colours, I don't know what happened and I'd appreciate any kind of help!

Thanks for the feedback if any!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @CiMorann 👋, good job for completing this challenge!

    You accidentally deleted the background-color property in your body element, it changes the color from white to the expected blue:

    background-color: var(--Pale-blue);

    Tips:

    • You should use the <a> tag to cancel the order
    <a class="proceed-to-payment">Proceed to Payment</a>
<a class="cancel-order">Cancel Order</a>

    Note: If you have problems with the width of the proceed-to-checkout, use the display: block property, so that it occupies the width and height that you indicate.

    The anchor tag has display: inline by default. More information.

    • Use margin: 0.625rem or margin: 10px in the .main-contrainer selector so that it has some space when viewed on mobile devices.

    I hope those tips will help you.

    Good Job and happy coding !

    Marked as helpful
    0
    César Morán•60
    @CiMorannPosted about 2 years ago

    @MelvinAguilar Appreciate that! I did not notice that background problem I caused. I'll take that in count!

    1

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