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

nimbul30 110

@nimbul30

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


I had some issues with getting the background right, had to follow a youtube tutorial to get it dialed in. Any suggestions on improving is welcome.

Community feedback

Francesco 270

@FraCav99

Posted

Hi, nimbul30!

Instead of:

background: url(./images/pattern-background-desktop.svg) no-repeat center/cover;
height: 50vh;

try this:

background-image: url(...);
min-height: 100vh;
background-size: 100% 50%;
background-repeat: no-repeat;

A useful tip is, if you have to give an height, in most cases it's better to use min-height.

Here an explanation on why.

Hope this is useful and happy coding!

Marked as helpful

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