Skip to content
Submitted 9 days ago

Responsive QR Code Component | Using HTML and CSS

Zahra Ehsani•100
@ehsanidev
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 created and completed this project in an hour and a half, and that’s something I’m proud of.
This project was made responsive using Flexbox, and I’m considering using Grid for responsiveness next time.

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

The paragraph was not adhering to the layout as intended, and the size it was supposed to be was 15 pixels. The issue was not with the font size, but rather with not assigning a width to the container.

To make it responsive, the first unit that came to mind was percentage (%). However, on mobile sizes, the container looked like a thin bar. So, I decided to change the unit from percentage to rem, and fortunately, the appropriate width was achieved.

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

I would really love to get your feedback on how I’ve handled styling in the CSS file.

Community feedback

  • Amir_mohammad•100
    @Amir-mohammad-ahmady-1234Posted 7 days ago

    It was a really good job. But for me there is a problem with the display and responsive display. If you fix it, it will be even better!

    Marked as helpful
    0
    Zahra Ehsani•100
    @ehsanidevPosted 6 days ago

    @Amir-mohammad-ahmady-1234 Thank you, interesting! what is your screen size?

    0
    Amir_mohammad•100
    @Amir-mohammad-ahmady-1234Posted 6 days ago

    @ehsanidev I forgot the exact size, but it's a smaller laptop.

    0
  • laurice-m•40
    @laurice-mPosted 9 days ago

    You did a wonderful job with your project. I loved how you used variables for your CSS styling which makes things very easy to understand. One thing that we could update is to use less IDs because they have a high specificity and can only be used one time within a project. I would use classes instead of IDs for project scalability. You did great! Kudos!

    Marked as helpful
    0
    Zahra Ehsani•100
    @ehsanidevPosted 9 days ago

    @laurice-m Thank you for your feedback, you are right about using classes instead of IDs, I absolutely change these in the next update🙏🏼🙏🏼

    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