Skip to content
Submitted 5 months ago

QR Code Card

Dylan de Bruijn•3,230
@DylandeBruijn
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?

How close the solution looks to the design. I would start mobile first next time.

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

I didn't encounter any challenges.

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

General setup of the project. Can I structure my HTML and CSS better? Can I make my component more responsive?

Community feedback

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

    Hi!

    Congrats with your first challenge. It's quite a neat and accurate work =)

    The main tag and semantic tags at all have a very wide browser support now, so there is no need to use role attribute. It's preferable to use tag where it's possible.

    To make your elements more responsive you can use max-width property.

    .qr-code {
    max-width: 320px;
}

    Or in combination with the width:

    .qr-code {
    width: 95%;
    max-width: 320px;

    In both cases .qr-code element will keep 320px until the screen become smaller. Than it'll take 100% or 95% from the screen. It isn't necessary in this project as mobile version designed for 375px screens, but will be useful in future.

    Well, hope that helps. Good luck =)

    Marked as helpful
    0
    Dylan de Bruijn•3,230
    @DylandeBruijnPosted 5 months ago

    @Alex-Archer-I

    Thanks a lot for taking the time and providing me with valuable feedback Alex!

    1
    Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    @DylandeBruijn

    You're welcome. Feel free to ask or comment anything if need =)

    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