Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive design using CSS with SCSS and flexbox

@shravankumartalabhaktula

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

@jilliannoreen

Posted

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!

0

@shravankumartalabhaktula

Posted

@jilliannoreen Thank you so much for your feedback.

0
Axurynn 200

@Axurynn

Posted

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! 😊

0

@shravankumartalabhaktula

Posted

@Axurynn Thank you for your feedback :) Sure, I will follow your suggestions.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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