![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/fa5miskra6ak2ob1my64.jpg)
Design comparison
Solution retrospective
A quick one.
I'm curious how do you start your project, so let me tell you how I start mine.
I go to the device toolbar in dev tools to get the mobile view and put in 375px as width, try to nail the padding on the body the design has by eye, then do typography, and when I'm at the layout, I always seem to get in trouble regarding the size of the card / component vs font-size vs line-break...
What's best practice here? Are we supposed to give a definitive width of like 300px to the mobile view card, or are we supposed to go max/min-width?
What's the logic behind 375px and 1440px in the designs? Because if my mobile view's card is 375px then the whole design is going to be bigger because of the body padding that comes on top. If I put in 375px in dev tools' mobile view, I guess the card's width based on the temporary font-size I have set and checking where the line break is supposed to happen.
I've been thinking about it too much and had to always go back to change things around which changed other things and it's just time badly spent.
I know this could be circumvented by a pro subscription, I'm just curious how others tackle this. Thanks!
Community feedback
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