Responsive page using flexbox and starting with mobile workflow first
Design comparison
Solution retrospective
I'm still looking for a better way to improve my code. Please give me some advice. Thank you!
Community feedback
- @hitmorecodePosted about 1 year ago
Good effort, I took a look at your page and I have a few suggestions
- Avoid using % or vh for cards width and height. This will do more damage than good. For cards width and height use rem, em or px.
- Your css is kind of all over the place, it was a bit hard for me to figure out what was wrong with it. When writing css try to go from top to bottom, just like you structure your html.
I've made some changes in your css (see below)
## Lines with /**/ are the ones I modified ## Lines that are commented out can be removed body { /* right now you have it inside the media query, move it to here */ display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; } .container { /* this rule is new */ width: 370px; height: auto; } .result-side { border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; background-image: linear-gradient(var(--lightslateblue) .1%, var(--lightroyalblue)); /* height: 100%; */ text-align: center; display: flex; /**/ justify-content: center; align-items: center; flex-direction: column; padding: 20px; } #title { font-size: 1.063rem; font-weight: 600; color: var(--lightlavender); /* padding: 22px; */ } #total-score { /* margin: auto; */ color: var(--lightlavender); border-radius: 50%; width: 200px; /**/ height: 200px;/**/ display: flex; justify-content: center; align-items: center; flex-direction: column; background-image: linear-gradient(to bottom, var(--violetblue), var(--persianblue)); margin: 20px 0; /**/ } #great { font-size: 1.375rem; color: var(--white); font-weight: 700; /* padding-top: 22px; */ /* padding-bottom: 10px; */ } #comment { font-size: 0.938rem; color: var(--lightlavender); font-weight: 500; /* padding: 0 50px 35px; */ } @media screen and (min-width: 650px) { /* body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; } */ .container { display: flex; width: 610px; /**/ /* margin: 75px auto; */ box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px; border-radius: 30px; } .result-side { border-radius: 35px; width: 110%; } #title { font-size: 1.375rem; font-weight: 600; padding: 30px; } #total-score { font-size: 1.25rem; font-weight: 600; /* border-radius: 50%; */ /* max-width: 60%; */ /* min-height: 28vh; */ } #yourscore { font-size: 5rem; } #outof { font-size: 1.063rem; } #great { font-size: 1.875rem; padding-top: 25px; padding-bottom: 15px; } #comment { font-size: 1.063rem; } .summary-side { font-size: 1.375rem; padding: 30px 35px; } .summary-side ul { font-size: 1.125rem; margin-top: 25px; } .summary-side ul li { margin-bottom: 20px; } .continue-button { margin-top: 20px; padding: 18px; font-size: 1.063rem; border-radius: 40px; } }
Marked as helpful1 - @Wally-DevkingPosted about 1 year ago
Nice work;
But I noticed that the Circle where you have the 76. Is more Oval than circle. That must be an error from your CSS sizing or border-radius.You can utilize the deign guide dimensions sent to you by Frontend Mentor.
0@TKNsssPosted about 1 year ago@Wally-Devking maybe I should add more @media to adjust the size in different screen sizes. Is that ok?
1@Wally-DevkingPosted about 1 year ago@TKNsss I think you can adjust the circle- using equal height and with ( height:50px; width: 50px; border- radius: 25px;)
Or check up W3schools to see more examples
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