Frontend Mentor | Order Summary Component using Flexbox coding challenge solution

Solution retrospective

This design looks simple but took must of my time. I have a few questions that I need help on.

How do you get the background with both image and color using background shortcut?
How do you prevent the background image from shrinking when you reduce the width of the screen? NB: Try minimizing my design on a large screen.
What is the best practice for handling decorative image like the illustration in this challenge? Do you set it as background or as image like I did?

All feedback to make my code simpler will be appreciated.

Thanks

Community feedback

Ken• 4,915

@kens-visuals

Posted over 2 years ago

Hey @Kobinamd 👋🏻

Let me first answer your question, and then I'll give you some feedback 🙃

This is how you add them in one line, however, I wouldn't suggest this. Even though it looks kind of short, it will be a lot harder to debug. So separately, and you'll thank yourself in the future 😅

background: no-repeat 
             url(../images/pattern-background-desktop.svg), 
             hsl(225, 100%, 94%);

You can give background-size: cover; and it will in its original size and cover the whole width. But in this challenge it's correct to use contain, so that your project matches the original design.
There's no right or wrong way, honestly, it all depends on the layout. In this case, I'd say what you did is the right way, because it's easier to position, rather than if you placed it as a background image. There would be a lot more code and just to position a small icon.

Now let me give you a couple of small suggestion for this and future projects.

The music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
I'd take .attribute out of main and place it before the closing body tag, since it's considered footer of the layout. Also change its tag like so: <div class="attribution">...</div> should be <footer class="attribution">...</footer>.
One last thing, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

I hope this was helpful 👨🏻‍💻 if you have any follow-up questions, let me know. And the project looks good, well done. Cheers 👾

Order Summary Component using Flexbox