@TedJenkler
Posted
Hi @Pjoabe,
Nice work on your project! With the mobile-first approach, you want to start by designing for the smallest screen size—typically mobile devices—and then gradually add styles for larger screens.
To do this, you want to set your initial viewport to something like 375px in Chrome DevTools. From there, you build your base styles and then use media queries with min-width to adjust for larger screens, like tablets (768px), laptops (1024px), and desktops (1440px).
One thing you want to avoid is setting fixed heights. Instead, use padding and margin to manage spacing. This allows the content to be more responsive across different screen sizes.
If you’re looking for more guidance, you might want to check out Kevin Powell on YouTube—he has great tutorials on responsive design.
Hope this feedback is helpful!
Best, Teodor
Marked as helpful
