Responsive component with CSS Grid and Flexbox -- kind of mobile first
Design comparison
Solution retrospective
I don't know much about the mobile first approach. How can I change/should have written this code so that it's mobile first?
Community feedback
- @MaylaylooPosted over 1 year ago
Try to avoid working with px, get familiar with "rem" instead. Also with margins try to use %, so website would be more responsive. If you need to change your layout in some ways for smaller screens use @media (max-width: <pixels>) { your code }. In "your code" you re-write your elements which you need to be changed on devices with smaller screen width than <pixels>. For instance: #wrapper { display: flex; flex-direction: column } #main-text { font-size: 1rem; } @media(max-width: 784px) { #wrapper { flex-direction: row } #main-text {font-size: 1.2rem; padding: 2%} }. Hope you understand :)
Marked as helpful1
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