Skip to content
Submitted 6 months ago

QR Code Component Main

Julie•130
@salentipy
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?

What I learned Just learning how to use Figma. This project was a nice intro to that!

Continued development Always looking for best practices especially in regards to accessibility and responsivity. Any feedback received may be added here at a later date.

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

Still working out how to properly use Figma since I upped my account to a paid sub.

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

I'm still having some "issues" with vertical alignment - if they are indeed actually issues. My images aren't always lining up well in the slider comparison window.

Community feedback

  • Øystein Håberg•10,390
    @Islandstone89Posted 6 months ago

    Hi, great job!

    Some suggestions:

    HTML:

    • The alt text must also say where it leads(frontendmentor website).

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

    • I would move the properties on .wrapper to the body. You don't need to declare nowrap, as that is the default value for flex-wrap.

    • Remove the width on the card. Instead, give it a max-width of around 20rem to prevent it from getting too wide on larger screens.

    • On the image, remove the width and height. Add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    Marked as helpful
    0
    Julie•130
    @salentipyPosted 6 months ago

    @Islandstone89 Thanks so much! I made all the changes you suggested. (I always get mixed up when to use min- and max-heights and widths and such. Not sure why I have a hard time with that.) I didn't change the CSS reset. I started looking into that, and it sent me off into hours of different rabbit holes! I need to do some more research into the best way to do that. Thanks again for the feedback! Much appreciated!

    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