Skip to content
Submitted 2 months ago

Responsive Order Summary

Aamir Khan•130
@Aamnbaba
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

What challenges did you encounter, and how did you overcome them?

I encountered challenges with excessive spacing and layout issues on smaller screens. I overcame them by adjusting media queries to modify dimensions and padding, ensuring the card and its content fit properly within the viewport. Fine-tuning these styles improved responsiveness and usability.

What specific areas of your project would you like help with?

I need help with adjusting spacing and layout for smaller screens in my project. Specifically, I'm facing issues with extra space and alignment that aren't responsive as expected. Any guidance on optimizing the design for various screen sizes would be appreciated.

Community feedback

  • Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted 2 months ago

    I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.

    Marked as helpful
    1
    Aamir Khan•130
    @AamnbabaPosted 2 months ago

    Yes, Sure. I will try it. Thank you @SvitlanaSuslenkova

    0
  • MikDra1•6,980
    @MikDra1Posted 2 months ago

    If you want to make your card responsive with ease you can use this technique:

    .card {
width: 90%;
max-width: 37.5rem;
}

    On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

    Also to put the card in the center I advise you to use this code snippet:

    .container {
display: grid;
place-items: center;
}

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    0
    Aamir Khan•130
    @AamnbabaPosted 2 months ago

    Sure, i will try it too. Thank you @MikDra1

    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