Skip to content
Submitted over 1 year ago

Responsive QR Code Page using CSS flexBox

Muhammad Muzzammil•350
@mk-muzzammil
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

=> 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•490
    @Bibiwei-PerePosted over 1 year ago

    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
    Muhammad Muzzammil•350
    @mk-muzzammilPosted over 1 year ago

    @Bibiwei-Pere thanks buddy yeah you are correct

    0
    Bibiwei Pere•490
    @Bibiwei-PerePosted over 1 year ago

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

    0

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