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

Solution-order-summary-component

hilmi77 250

@hilmi77

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


What are you most proud of, and what would you do differently next time?

--->I did this project without much difficulty.

--->I'm open to any advice you can give me.

-->Is my code clean?

--->Do I have any shortcomings?

--->I'm looking forward to your feedback

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @hilmi77!

Your solution looks amazing!

About your background, you're using mobile image for desktop version and using cover for size. Here's how you can fix it:

body {
    font-family: "Red Hat Display", sans-serif;
    background: url(./images/pattern-background-desktop.svg) no-repeat; /* Use desktop image for desktop version ✅*/
    background-size: contain; /* Use contain ✅*/
    background-color: var(--Pale-blue);
    display: grid;
    place-items: center;
    height: 100vh;
}

I hope it helps!

0

hilmi77 250

@hilmi77

Posted

@danielmrz-dev thx!

I will fix this

if you've any other advice, I'd love to hear it

0

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