Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR Code Page using CSS flexBox

@mk-muzzammil

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


=> I find difficulty in dealing with mobile responsiveness how i can set the sizes of container so that it will not overflow from container .

=> i think there is no problem in my code

=>Yes i want to know the best practices that will help me to be good on html css

Community feedback

@Bibiwei-Pere

Posted

Hi

Congratulations on completing this challenge

Firstly, use min-height instead of height. Using height makes your solution not scrollable in smaller screens.

.mainBodyContainer {
min-height: 100vh;
}

Also, to stop the container from overflowing. Add d following line of CSS

.QRcodecontainer {
max-width: 280px;
width: 95%;
}

Check this Solution for more info

Overall, you did a great job 👍

Hope you find this helpful

Marked as helpful

0

@mk-muzzammil

Posted

@Bibiwei-Pere thanks buddy yeah you are correct

0

@Bibiwei-Pere

Posted

@MK-Muzzammil You're welcome 👍 Let's connect on GitHub

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