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

Responsive Order Summary Component

P
Orazbekβ€’ 110

@orazdaurenov

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


Here's my solution to this challenge.

I still have a small issue regarding the items that go off, including the footer, when the page is resized.

Any your feedback and advices are more than welcome !

Thank you

Community feedback

Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE πŸ“Έ:

  • Looks like the background svg and color has not been set, let me explain How you can easily apply the background color with the svg they provided.
  • Add the following style rule to your css, and then experience the changes
body {
    background: url(./images/pattern-background-desktop.svg), #E1E9Ff;
    background-repeat: no-repeat, no-repeat;
}
  • Tip, Don't forget to generate a new screenshot after editing the css file

.

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

P
Orazbekβ€’ 110

@orazdaurenov

Posted

@0xAbdulKhalid thank you for your feedback !! I've added the background, actually I forgot about the background.

One more thing if I can ask you, as for the payment button, when the page is resized the button remains unchanged, even if I set it in REM, not pixels

What should I add to match the design ?

thanks

0

@Genildocs

Posted

Hello, sorry for the delay in responding. You can do it this way, put the content of the footer in a div, for example:

<footer> <div class="">content</div> </footer> This way you can apply the display flex to the footer without affecting the elements contained in it.
0

@Genildocs

Posted

Hello, congratulations on completing the challenge!

  • I have a recommendation about the footer section, could you apply flex-box to it and center-align it, then give it a height so it doesn't get stuck to the main content. It also doesn't have enough width to grow and scale the content correctly.

I hope I have helped.

0

P
Orazbekβ€’ 110

@orazdaurenov

Posted

@Genildocs thank you for your feedback, could you please explain it to me more precisely ? because i tried what you suggested, but don't see any changes

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