Skip to content
Submitted 9 months ago

Vanilla CSS with flexbox

Leon Potgieterā€¢290
@leonp84
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Not sure what's being done to create the wavy background effect using a single SGV file. It almost looks like the file is being repeated and flipped on the x-axis. Not sure how to accomplish this with CSS. Any advice would be appreciated!

Community feedback

  • Daniel šŸ›øā€¢44,310
    @danielmrz-devPosted 9 months ago

    Hello @leonp84!

    Your solution looks great!

    About the background:

    šŸ“Œ First you need to make sure to use the correct image for the desktop version. I took a look at your code and noticed that you used the mobile background image for the desktop version.

    šŸ“Œ Second, use background-size: contain.

    Once you do those two minor changes, it's gonna look like the design.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
    Leon Potgieterā€¢290
    @leonp84Posted 9 months ago

    @danielmrz-dev Ah yes, of course. Forgot all about that images folder šŸ˜…

    1

Please log in to post a comment

Log in with GitHub

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