Design comparison
Solution retrospective
Hello, Frontend Mentor community. This is my solution to Order summary component challenge.
Happy to hear feedback and advice!
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @ilyasazer, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!
🎯 Your solution its almost done and I’ve some tips to help you to improve it:
1.When you download the project files there’s a file called
style-guide.md
where you can find information such ashsl color codes
and thefont-size
for the headings. The background-color in this case isbackground-color: #E0E8FF
2.Replace the
div
with<main>
(every page should have a main landmark and also a main h1 heading) so replace the h3 to with<h1>
and follow the sequence if you add another heading as h1, h2, h3…3.🐸 Use this mini game to learn
FLEXBOX
and all its properties by positioning the frog and become aFLEXBOX MASTER
here's the link: https://flexboxfroggy.com/4.To make this alignment, first of all put
min-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.You tried to align the component using
margins
andposition relative
but this make this task really tricky and hard control all the content. My advice for you is to useflexbox
to create this alignment. First thing you've to do is to addmin-height: 100vh
to make sure your body will be displaying minimum 100% of the view-port height (this will help the card be ever aligned vertically centered) and then adddisplay: flex; align-items: center; justify-content: center;
to make the alignment:✌️ I hope this helps you and happy coding!
Marked as helpful0@ilyasazerPosted about 2 years ago@correlucas thank you so much bro for your help , and i I will take good care of this advice ❤️❤️
0
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