Order Summary Component | HTML and CSS
Design comparison
Solution retrospective
I'm Currently learning CSS and i'm open to your valuable suggestions to improve my solution.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Bandaru, congratulations for your new solution!
To make your container responsive and scaling with the screen size, you need to replace
width
withmax-width
do the test and you'll see the difference when the container scales, see the code fixes below:main { display: flex; flex-direction: column; background-color: white; max-width: 340px; height: auto; justify-content: center; align-items: center; border-radius: 1rem; }
π I hope this helps you and happy coding!
Marked as helpful0 - @denieldenPosted about 2 years ago
Hi Bandaru, congratulations on completing the challenge, great job! π
Some little tips for optimizing your code:
- For 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;
- also you can use
article
tag for the container of card for improve the Accessibility (main tag is for all the main content of page) - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container ofbutton
- centering a
div
withabsolute
positioning is now deprecated, it uses modern css likeflexbox or grid
- use
min-height: 100vh
to body instead ofheight
, otherwise the content is cut off when the browser height is less than the content - add
transition
and:hover
state on the element with hover effect -> read here - instead of using
px
use relative units of measurement likerem
-> read here
Hope this help! Happy coding π
Marked as helpful0 - @vanzasetiaPosted about 2 years ago
Hello, Bandaru Sindhuja! π
Two things can be done better.
- Remove all
br
elements from the heading and paragraph. Let lines wrap where they need to. Screen readers will read outbr
elements. You can't accommodate every screen size, so it's rare you'll ever need to use them. - Always specify the
type
of thebutton
. In this case, set the type of them astype="button"
. It will prevent the button from behaving unexpectedly.
That's it! I hope you find this useful! π
Marked as helpful0 - Remove all
- @elaineleungPosted about 2 years ago
Hi Bandaru, I think you did a really good job here! You probably just need to position it a bit better and giving some more padding so that it can look even closer to the design π
In your code, I see that you used
height: 109vh
, which could be a typo π , but in any case, I suggest that you usemin-height: 100vh
instead. Lastly, instead of a fixed width, try something likemax-width: 400px;
and change the width on the image towidth: 100%
so that the component can be responsive!Marked as helpful0 - @shaswatsingh19Posted about 2 years ago
Hi, I think you could provide some interactivity to button while they been active and as Cancel button is also works like a button it should have like cursor : pointer as it looks good like that.
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