Skip to content
Submitted almost 3 years ago

Sek - HTML + CSS: Responsive Order Summary

sek-devops•110
@devwinner-sek
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello. For this challenge, please :

  1. How can i manage mobile display ? (I used media queries, is there other solutions)
  2. Make the background image full screen was a big issue because of its size.
Code

Please log in to post a comment

Log in

Community feedback

  • Sam•230
    @samd1a

    Hi sek-devops, Congrats on finishing your challenge, it looks great! To answer your question.

    I tend to use media queries to make shifts in the layouts only as min() and clamp() can be used to make the font size smaller as the page's size gets smaller.
    A good video summarizing this is by Kevin Powell: https://youtu.be/U9VF-4euyRo

  • Gilang Aditya•425
    @madegilangaditya

    Hi, congratulation for finish your challenge, thats really good from my side. Here are some suggestion for me that I found on your solutions.

    • I see you set the width and height for the card-centered and card-container class. Try to avoid that, better use padding or margin on it.
    • Use max-width and set the width to 100%, instead to set the width using px, it will help the responsiveness of your site for mobile view.
    • For the background image already good as I see, maybe you can try put it in the body.

    I think thats it from me hope can help.

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