Submitted over 2 years ago

order-summary-component

Will• 210

@wkan17012021

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Attempted this one to get quicker at turning around these card projects. One thing that i couldn't get to work was the background image (two shades of lilac wave-design): I tried css: background-image: url() property; background-repeat: no-repeat; tried background-size: cover and/or contain; background-position: center;

I couldn't get the wave feature to be positioned as per the desktop design. For me, the background properties I used above rendered the wave further up the screen. In the end i added the image using html img tag. It would be interesting to know how this was done with more 'elegantly'. Thanks

Community feedback

Peter• 170

@PeterJan285

Posted over 2 years ago

I dont think bg sliding up is such a big deal, i just checked my solution and its the same. You can click /solutions/wall of fame/ then look thru top devs and their solutions, maybe someone managed to fix it

<i>"done is better than perfect"</i>

Marked as helpful

Robert McGovern• 1,095

@tarasis

Posted over 2 years ago

@PeterJan285 "done is better than perfect" - bingo, something I need to work on myself.

Peter• 170

@PeterJan285

Posted over 2 years ago

@tarasis indeed, im a cursed perfectionist as well

Robert McGovern• 1,095

@tarasis

Posted over 2 years ago

I finished this one earlier this morning (well yesterday), and did exactly what you mention I have a main section, to which I set the background-image (using a variable with the url), no-repeat and then used a media query to change the value of the variable for the other image.

https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj/hub/responsive-order-summary-component-using-clamp-Z0PfvSIH1

Or specifically the code I used was ...

main {
    background-image: var(--page-background-img);
    background-repeat: no-repeat;
    min-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

From https://github.com/tarasis/tarasis.github.io/blob/main/FrontendMentor/newbie/order-summary-component/css/style.css

Note the SVGs are fixed size (unusually), so you want the media query at 376 to switch between mobile / desktop versions.

Marked as helpful

Jessica• 880

@perezjprz19

Posted over 2 years ago

Hi!

I don't know about more elegant, I used two different media queries for the background and mine is actually a bit jumpy when it resizes. I need to go back to this later anyway, maybe I'll address it then. Let me know if you find a better solution!

You can see my solution here: https://www.frontendmentor.io/solutions/order-summary-component-using-flexbox-5UlxZi3Kt

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