Skip to content
Submitted over 2 years ago

Responsive Order Summary Card Component Using Flexbox

Sai•50
@A-C-Sai
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 friends :D,

I got a few questions:

  1. I had trouble positioning my background image especially getting it to stretch the entire view-port width. After researching I came background-size: 100%;, and it worked out! Is this the correct approach? Is there a way to position background-images absolutely?

  2. For the subscription plan section the "Annual plan and $59.99" had to be right-aligned so I initially set the div to display:flex and then set flex-grow: 1 for the "Annual plan and $59.99" div and used text-align: right. This worked out well. I was wondering is there were other methods people used to attain the same result/layout.

  3. So far this challenge was my hardest, If there's anything I haven't mentioned above and need to Improve on please let me know. (best coding practices etc...)

THANKS IN ADVANCE (:

Community feedback

  • IRVINE MESA•1,855
    @DrMESAZIMPosted over 2 years ago

    hi Sai

    let me answer your questions

    1. For the background size it is indeed correct to use 100% despite that newer code editors do assist you to choose either "fit" or "contain" you can either choose from either.

    2. For all my coding is the case of position the text a will use

    .plan-details{display: flex; flex-direction: column}

    this will perfectly do the job you are trying to do

    3 lastly I would like you learn how to place your solution right in the middle of the screen using .card { display: flex ; justify-content: center; align-items: center; min-height: 100vh}

    If you find this a challenge to resolve let me know and I could do a YouTube video for your editing your project code

    Marked as helpful
    0
    Sai•50
    @A-C-SaiPosted over 2 years ago

    @DrMESAZIM Thanks a lot. I used utility classes on main to center my card in the middle of the screen. If I did .card { display: flex.....} as you suggested wouldnt that effect the contents of the card and change the height of the card?

    0
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 2 years ago

    @A-C-Sai I will do YouTube video and share with you ..

    Marked as helpful
    0
    IRVINE MESA•1,855
    @DrMESAZIMPosted over 2 years ago

    @A-C-Sai hi please refer to my YouTube video which I did , as I reviewed your code and made some proposed changes on the link below. For easy access use the YouTube chapters in the video description

    https://youtu.be/hn3AemoCYYI

    Marked as helpful
    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