Skip to content
Submitted about 3 years ago

Responsive design using CSS with SCSS and flexbox

sass/scss
Shravan Kumar•50
@shravankumartalabhaktula
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there,

I'd like to have feedback from you.

  • My design is not mobile friendly for now, I tried my level best to implement the responsiveness for few screen sizes. I'd like to know what all generic screen sizes available and how to target them while developing the mobile first design strategy?
  • Am I following the best practices while writing the scss files?
  • Can you please suggest me where I need to improve and some tips and tricks on how to plan before starting to code.

Thank you so much for your time.

Code

Please log in to post a comment

Log in

Community feedback

  • Jillian Noreen•60
    @jilliannoreen

    Looks good! You've done great! You might want to consider adding a box-shadow to further match the design provided. I can’t give much help, especially with the responsiveness, since I'm a beginner myself. All the best for the future challenges, keep up the good work, let's keep learning!

  • Axurynn•200
    @Axurynn

    Good job @shravankumartalabhaktula!

    To fix accessibility issues, you could add a main tag to your HTML file as well as h1 title. About the responsiveness, you could add max-width properties or use @media queries. For example, the min-width you could use in your media queries are 480px for mobile, 767px for tablet and 1280px for desktop.

    Overall, you did well! Congratulations! 😊

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