Skip to content
Submitted 6 months ago

Responsive qr code page using CSS Flexbox

Felipe•60
@typingfe
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?

I want to improve my CSS skills.

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

Adjusting width

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

I don´t know much about width

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    Hi! Your work is quite cool =)

    Speaking about width it's better not to set width for h1 and p elements but for .main__container.

    You can use this approach to make container responsive:

    .main__container {
    width: 95%;
    max-width: 375px;
}

    This way container will take 95% of the small screens but will keep 375px width on the big ones. h1 and p elements will take 100% of container's width by default and for img you can explicitly set it to 100% (it'll keep the proportions).

    Also I can recommend you to use min-heigth instead of height for main tag in case if user's screen will be smaller than content of the page.

    Overall, good job! Good luck and keep doing =)

    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