Skip to content
Submitted 6 months ago

Responsive Order Summary Website using CSS Flex

Nafis Sazzad Niloy•190
@methane-js
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am very proud because I have learned how to use CSS Flex in a better way and I have also made this website responsive for mobiles.

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

The first challenge was to make the annual plan section. It was really tough for me as I am a beginner.

But when I used CSS Flex, my problem was solved easily.

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

I have noticed that the background image of my website doesn't look well on mobile screens and less than 1600px width.

Please tell me if you know how to solve this problem.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi @methane-js,

    Regarding your background image issue, I noticed you're using background-size: contain on the body. Instead of that, you might want to estimate what percentage of the background-image should cover the width and height of the body. Then, you can use background-size: [width]% [height]% to customize it accordingly.

    For example:

    body {
  background-size: 50% 70%; /* Adjust width and height as needed */
}

    Play around with the percentages to find the right fit for your layout.

    Hope this helps!

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