Frontend Mentor | Order summary using flexbox coding challenge solution

Solution retrospective

This is my seventh challenge.

So far my I don't run problem with lay-out and positioning but it seems that i have a consistency problem when it comes to font-size. Although i used relative units. I always test different font-size to look the same with the design. Is it a bad practice to always relay on what you see in the design or just go with instinct in setting font-size?

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

Looks like the background svg and color has not been set properly, let me explain How you can easily apply the background color with the svg they provided.

Add the following style rule to your css, and then experience the changes

body {
    background: url(./images/pattern-background-desktop.svg), #E1E9Ff;
    background-repeat: no-repeat, no-repeat;
}

Tip, Don't forget to generate a new screenshot after editing the css file

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Jurdel Gallano• 380

@secretcrew2

Posted over 1 year ago

Thank you for bringing that to my attention as it is one of the issues. It's my first time combining a background image with a background color, so I appreciate your guidance. I will follow your advice and work on understanding the underlying principles. Thank you again, @0xAbdulKhalid!

Order summary using flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community