Skip to content
Submitted almost 3 years ago

Order Summary Component Solution

dominiquemc•90
@dominiquemc
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

I saved this challenge a while ago but found it tough at first. Today, I went back and managed to finish it in just an hour or so which I'm happy about :) However, I would love to know any changes I could've made/added. I was a bit unsure about the "Annual Plan" and the "$59.99/year" I was trying to get the $59.99 to go under the annual plan but the only way it seemed to work was reducing the width of the annual-plan container which pushed it under.

I would love insight on how I could better address that in the future and any other recommendations so I can continue learning!

Community feedback

  • MikevPeeren•2,100
    @MikevPeerenPosted almost 3 years ago

    Hey @dominiquemc,

    Good job!

    For the "Annual Plan" and the "$59.99/year" text you can use a main element which uses display:flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Your background image also does not have the full width at higher resolutions like 2560x tools like Responsivelyapp can help you with this.

    I am also missing types for your buttons: https://html.com/attributes/button-type/

    Marked as helpful
    1
    dominiquemc•90
    @dominiquemcPosted almost 3 years ago

    @MikevPeeren thank you for recommending Responsivelyapp. I just downloaded it and it's great! I'm not able to see the resolution of 2560x so if you can direct me on how I can locate that, I would appreciate it :)

    Thanks for explaining about the annual plan as well!

    0
    MikevPeeren•2,100
    @MikevPeerenPosted almost 3 years ago

    @dominiquemc on the left there is an option to add devices, you can then add different dimensions.

    Marked as helpful
    1
    dominiquemc•90
    @dominiquemcPosted almost 3 years ago

    @MikevPeeren Found it. Thanks! So to get the full width I would have to input a media query for 2560px?

    0
    MikevPeeren•2,100
    @MikevPeerenPosted almost 3 years ago

    @dominiquemc what I usually do is you can just select higher resolution devices like Mcbook pro 16 inch.

    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