Submitted over 1 year ago

Responsive Checkout Page with Flexbox

@Ayodesigns

A solution to the Order summary component challenge

Solution retrospective

I had a little trouble with the background of Webpage, in the design files given it appeared as if the background SVG was doubled and flipped 180deg with some box-shadow. But I could not replicate it. which resulted in issues when I wanted to center the card

Code

Please log in to post a comment

Community feedback

Iggy19944•160
@Iggy19944
Posted over 1 year ago
This was my solution for the background. you wan to give the background color, because the white part is actually transparent. and you wan to give your image Background-repeat:no repeat;

This is what it looked like for me
```
body {
    background-color: hsl(225, 100%, 94%);
    background-image: url(images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
```
Marked as helpful

gfunk77•1,270

@gfunk77

Posted over 1 year ago

Nice job on your solution. For the background, have you played around with using a background property on the main container, which in your case is the body? I think something like this will help.

body {
background: repeat-x url('./images/pattern-background-desktop.svg'), var(--pale-blue);
}

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