Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component

Mahin 50

@boredmahin

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion will be helpful.

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hello Mahin, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

Feel free to choose one of the two!

Instead of using "width" to specify an absolute width, use "max-width" to specify a maximum instead. By doing this, the content will behave much more amiably in smaller resolutions, making it easier to make the project responsive.

The remainder is excellent.

I hope it's useful. 👍

Marked as helpful

0

Mahin 50

@boredmahin

Posted

@AdrianoEscarabote thanks man for your suggestion. I'm kinda newbie in coding. This kinda support will surely help a lot ✌

1

Please log in to post a comment

Log in with GitHub
Discord logo

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