Mobile First Results Summary Component | Vanilla HTML & CSS
Design comparison
Solution retrospective
Challenge solved with the mobile first methodology.
Again I think I wrote more code in the CSS than needed to make it more organized for me, I have to improve more on that.
Other than that setting the widths and heights without figma's design is a real "trial and error" but in the end I feel it looks good!
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done, good effort. I took a look at your markup and css and there a few things you can do to fix some issues.
-
Because the width and height of the wrapper is set to 100hv and 100vw. This will create some problems with your page. The
height: 100vh;
creates a problem when the screen size is less than 100vh, part of the content will overflow outside the card in desktop mode. Either give the height a fixed value or set the height to auto. For the width remove 100vw and also add a value to the width. -
The circle in will stretch and shrink because you used % to define the circle. For best practice, give it a width and a height of 200px and after set the border radius to 100%. This will create a nice circle.
-
You can add this to the body to center the card.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
- Your break point is set to high make it smaller. Right now when switching from mobile to desktop. The card is stretching really wide
You can take a look at my solution. I'm not implying that my solution is the best, there is no wrong or right. This is just to give you an idea how I solved it.
Marked as helpful0@guilhermecampinaPosted over 1 year ago@hitmorecode Thanks for the feedback man I will definitely check it out and also study your solution. Thanks again!
0@guilhermecampinaPosted over 1 year ago@hitmorecode got it! My screen only reaches 1366x768 resolution so when it goes to full hd everything stretches.
0@hitmorecodePosted over 1 year ago@guilhermecampina that shouldn't be a problem. What you can do is check what the width of you card is. For example if the card is 740px wide, then you should set the min-width to 740px. When the screen size is lower than 740px, it switches to mobile.
I've created a simple layout, in the media query play with the min-width and see what works best for you.
If you still have questions, let me know
Happy Coding 👍😀
Marked as helpful0 -
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