Responsive design of a Order summary card using CSS FlexBox
Design comparison
Solution retrospective
my last challenge was a disaster... but I took corrections from experts here to create this, any suggestions please?
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @Tunde-webdev, good job for completing this challenge! 👋
I am not an expert but here are some suggestions to improve your code:
You could use the backgrounds properties to fix the background
body { . . . background-color: hsl(225deg, 100%, 94%); background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-position: left top; }
background-color
Set the background colorbackground-image
Set a background-imagebackground-repeat
Sets if a background image will be repeatedbackground-position
Sets the starting position of a background image.- Also you can use the
background-size
to specifies the size of the background image
The background property is a shorthand to all the properties mentioned above:
background: hsl(225deg, 100%, 94%) url(./images/pattern-background-desktop.svg) no-repeat left top;
References: CSS background Property | Background property
I hope those tips will help you.
Good Job !
Marked as helpful1 - @correlucasPosted about 2 years ago
👾Hello @Tunde-webdev, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
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 andbackground-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 usebackground-size: 125%
, Here’s the code with the modification and the image applied as background:body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; background-size: contain; justify-content: center; align-items: center; background-color: #E1E9FF; background-repeat: no-repeat; min-height: 100vh; background-image: url(images/pattern-background-desktop.svg); line-height: 1.3rem; }
✌️ I hope this helps you and happy coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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