Submitted over 2 years agoA solution to the Order summary component challenge
Order Summary Card using FlexBox
@AlexisMtzSa
Solution retrospective
I think I didn't find any big problems during the project, any suggestions are welcome
Code
Couldn’t fetch repository
Please log in to post a comment
Log in with GitHubCommunity feedback
- @jrleijnse
Hey there! Great job completing this challenge! 🎊
I have some suggestions for your code that might interest you.
CSS 🎨:
- To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example:
@media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.
For more information on this topic, you can read the following article: Media queries 📘
- An easy way to quickly and automatically center your
<main>element inside the<body>of your page, is by setting the following properties onto the<body>element inside your CSS like so:body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
I hope you find my suggestions useful, and above all: the solution you provided is very good!
Keep it up and happy coding! 😃
Marked as helpful - To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example:
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