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 with html and CSS

Mohomed Fahikโ€ข 60

@mfahikk1

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

1

Accessibility Issues

0

HTML Issues

View Report

Mohomed Fahikโ€™s questions for the community

Hey guys! I have created this project perfectly, but somehow I can see there is a problem with background image(pattern-background-desktop), where left side is not curved.

Highly appreciate your advising on that matter as well as any other mistakes you found.

Thank you.

Community Feedback

P
Vanza Setiaโ€ข 16,765

@vanzasetia

Posted

Hi, Mohomed Fahik! ๐Ÿ‘‹

For the background image, I would recommend making it a background image of the body element instead of using div. I recommend trying to set the background size of it to 100%. It will make the background image adapt through different screen sizes.

One suggestion is always to specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly (like submitting).

Hope this helps. ๐Ÿ™‚

Marked as helpful

0

P
Lucas ๐Ÿ‘พโ€ข 13,930

@correlucas

Posted

๐Ÿ‘พHello Mohomed Fahik, congratulations for your solution!

Answering your question:

I've inspected your code and I can see that you've applied the background-image using a tag <img> and playing with the z-index, the way I've found to fix the background was inserting it directly to the body (to be under all elements) and I've set some background properties to manage its size, I saw that you've used a shorthand, but in this case I've written each bg property separated, see the code with the fixes below:

body {
    background-image: url(./images/pattern-background-mobile.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

I can see it working right now with my G Chrome dev tools, do you too the test and say me if it fixes the error you're having with the background.

Hope it helps and happy coding!

0

Please focus on giving high-quality, helpful feedback and answering any questions mfahikk1 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!