Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component

#sass/scss
Santiago Moralesโ€ข 320

@Aleroms

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How's my scss structure?

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,580

@correlucas

Posted

๐Ÿ‘พHello Santiago, Congratulations on completing this challenge!

Here's some tips to fix the background:

The background wave image is missing and hereโ€™s the step-by-step to add it.First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%,

body {
    background-image: url(../images/pattern-background-desktop.svg);
    `: ;
    background-color: hsl(225deg, 100%, 94%);
    height: calc(100vh - 0.01px);
    display: flex;
    justify-content: center;
    background-size: contain;
    align-items: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

โœŒ๏ธ I hope this helps you and happy coding!

Marked as helpful

1
Erayโ€ข 1,410

@ErayBarslan

Posted

Hey there, excellent work with the challenge! Design looks good and accessible. Your scss usage looks alright and for such project you won't need more of it's features. By the time projects starts getting bigger you can start structuring your scss files like _variables, _mixins and import to main. But would be redundant for this one. Some suggestions.

  • Right now your card isn't responsive and that is due to the fixed width: 375px value on container. If you use max-width you'll see it's responsive for smaller screens aswell. By default width: auto which is taking available space to fit the content inside it. In this case you can increase the value to match the desktop design by keeping it same for 375 screen width: max-width: 450px;
  • There is a vertical scrollbar even though nothing overflows. That's due to the default margin on body. If you give margin: 0 to body it'll fix that. For your next projects I'd suggest resetting all padding and margin at the start of your project by using * { ... } selector. So you'd have full control over your elements. Aside these nothing I'd add, happy coding :)

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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