Skip to content
Submitted 3 months ago

I've used css flexbox, im without practice, so its the best i could.

Joabe Pereira•120
@Pjoabe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

im not proud of it, im just practicing.

in the next time i will do the "mobile first" thing.

What challenges did you encounter, and how did you overcome them?

didnt have like a "challenge", im just without practice...

What specific areas of your project would you like help with?

the mobile first thing and how to change the heights without crashing the flexbox.

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted 3 months ago

    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
    1

Please log in to post a comment

Log in with GitHub

Join 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