Skip to content
Submitted 22 days ago

Responsive QR-Code challenge

Idris Ogundele•50
@Ogidol
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 am so proud of myself for being able to think outside the box after several years of procrastination and failed strategies, i.e., watching tutorials and code along with tutors

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

During the challenge, I faced issues understanding how git and github work and their installation

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

I still face issues with the aspect of designing for various screen sizes(web responsiveness)

Community feedback

  • João Vitor•700
    @jvssvjPosted 21 days ago

    Hello, congratulations on completing the challenge 👏, I'll help you with a few things.

    1. Instead of setting a fixed width with width , try using max-width . This allows the layout to fit better on smaller screens, making the design more responsive without breaking the structure. For example, if you're using width: 500px;, try replacing it with max-width: 500px; and adding width: 100% so the element can scale down as needed. ex:
          main {
        width: 100%;
        max-width: 320px;
        margin: auto;
        background-color: #ffffff;
        padding: 16px 16px 40px 16px;
        border-radius: 20px;
      }

      img {
        object-fit: cover;
        width: 100%;
        max-width: 288px;
        max-height: 288px;
        border-radius: 10px;
      }

    Instead of writing CSS directly into your HTML with style="", try separating it into an external .css file. This makes it easier to maintain, improves code organization, and allows you to reuse styles across multiple pages. Good luck 🙌

    0
    Idris Ogundele•50
    @OgidolPosted 21 days ago

    @jvssvj Thank you so much for your feedback, it's means a lot to me and will work on that for future challenges

    0
  • Aldi•230
    @AldikrasniqiPosted 22 days ago

    Try to make font colors and font family like in the design.

    0
    Idris Ogundele•50
    @OgidolPosted 21 days ago

    @Aldikrasniqi Thank you so much for the feedback, I will work on it

    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