order summary component main using REACT with VITE and SASS/SCSS
Design comparison
Solution retrospective
hello community, any suggestion for improvement will be welcome
Community feedback
- @denieldenPosted almost 2 years ago
Hello Gabriel, You have done a good work! 😁
Some little tips to improve your code:
- To fix the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center; background-size: contain; background-color: #e0e8ff;
- add
main
tag and wrap the card for improve the Accessibility - remove all
margin
from.app
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful1@AdrianoEscarabotePosted almost 2 years ago@denielden With
contain
the background would keep cutting1@denieldenPosted almost 2 years ago@AdrianoEscarabote You are right! I was wrong to write. With
cover
it covers the entire screen.Thanks for the correction Adriano 😁
1@carlosGabrielCarrenoPosted almost 2 years agoThank you very much @denielden for your help and advice!
1@denieldenPosted almost 2 years ago@gabrielCarrenio You are welcome and keep it up :)
0 - @AdrianoEscarabotePosted almost 2 years ago
Hi Gabriel Carreño, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!body { margin: 0; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 100vh; }
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
-
Add a
background-repeat: repeat-x;
, the image will repeat on the horizontal axis, preventing it from breaking. -
Add a
background-size: 100% 50vmin;
, the50vmin
will set its height as the page target, and100%
will make it stretch on the horizontal axis.
Feel free to choose one of the two!
The rest is great!
I hope it helps... 👍
Marked as helpful0@carlosGabrielCarrenoPosted almost 2 years agoThank you very much @AdrianoEscarabote for your correction, I'll keep it in mind for the next one!
1 -
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