Submitted over 2 years ago

Order Summary component

#sass/scss

Ruth Ogendi• 70

@Bopchy

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello!

How can I get the shaped "wave" background to look as tight/close as it does on the design?

In my solution I added it as a background image and specified background-size: 100% 22em; so that it covers the full width of the screen. This stretches out the shape though

Community feedback

Nakoya Wilson• 1,530

@nakoyawilson

Posted over 2 years ago

Hey Ruth!

I looked at your CSS and it looks like you don't utilise the pattern-background-desktop.svg for your background on larger screensizes. Try changing the background image url to utilise the desktop background in your media query to see if that solves your problem.

Marked as helpful

Ruth Ogendi• 70

@Bopchy

Posted over 2 years ago

@nakoyawilson Thank you! I missed that. Using pattern-background-desktop.svg fixed it.

Nakoya Wilson• 1,530

@nakoyawilson

Posted over 2 years ago

@Bopchy You're welcome!

Please log in to post a comment

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