Design comparison
Solution retrospective
Hi, please give me feedback on the responsiveness of this design!
The desktop design looks close to the original, but I am confused about how to achieve the mobile design. Should I use media queries? How do I make the desktop design transition into the mobile design?
I am confused with responsive design in general, so any advice on how to alter my code to make it more responsive would be super amazing!
Community feedback
- @Li-BeePosted over 2 years ago
Hi similar to what @Kamasah-Dickson said it is better to start from mobile first as when you expand from mobile to desktop the adjustments you need to make is less in comparison to doing them the other way round.
What I did on this challenge was to start with mobile first and I put the card in an article wrapper
<div>
and did a<width>
of 87.2% and<margin>
of 0 and auto. So when the viewport is for example 375px the card width is 327px and there is space between the card and end of viewport.Link to my challenge: https://www.frontendmentor.io/solutions/order-summary-component-using-mobile-first-approach-and-css-grid-c-HmAvKIr
I am not saying it is perfect as I am still and learner and still learning about mobile first design but it may help 😁
Marked as helpful1@riverCodesPosted over 2 years ago@Li-Bee Thanks a lot! that makes sense. Will try that in my future projects :D
0 - @Kamasah-DicksonPosted over 2 years ago
First of all in responsive design I recommended you start designing on mobile first before you scale up everything to desktop. It is because majority of people are using their phones more than their laptops or computers. Am even using my phone to comment on your solution now.
Besides goof job there👍 Hope it was helpful
Happy coding👍
2@riverCodesPosted over 2 years ago@Kamasah-Dickson Thanks a lot! I will start on mobile designs first in my future projects :D
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