Skip to content
Submitted 3 months ago

Responsive QR Image with HTML/CSS

Garlic•30
@GarlicCoder
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'm glad that I was able to recreate the challenge almost identical! If I were to do things differently, I would do it in one night!! I started the challenge on one weekend and then didn't have time to finish it until the weekend after so it was a little hard starting where I stopped!

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

Learning how to upload as a Repository and commit changes to it was challenging! I'm not super familiar with Github and was googling so much how to use the terminal and trying to sync my updates. But the solution was right under my noise within the Source Control!

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

I would appreciate feedback on:

  1. Mobile Responsive - How the design looks on mobile.
  2. Animation and Hover Effects - I tried adding hover and animation effects in the CSS but they don't seem to appear on the live website! I'm not sure why.
  3. .container Div - I had a "container" div but wasn't sure if it was necessary since I never used it in my CSS.

Community feedback

  • MikDra1•6,980
    @MikDra1Posted 3 months ago

    Here are some tips from me:

    Mobile Responsive

    The design is clean and centered well on mobile, but adding more padding on smaller screens could improve the layout. Consider reducing the QR code size for better responsiveness.

    Animation and Hover Effects

    If animations and hover effects aren’t working, ensure your CSS selectors and file linking are correct. Use browser dev tools to check if styles are applied properly.

    .container Div

    The .container div is often used to center content, control the layout’s width, and apply consistent padding or margins. Even if you didn’t style it directly, it can help structure your layout and ensure consistency across screen sizes. However, if it isn’t necessary for your design, removing it can simplify your code. If you plan on expanding your project, keeping the .container might be useful for future styling needs.

    Hope you found this comment helpful 💗

    Good job and keep going 😁😊😉

    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