Skip to content
Submitted almost 3 years ago

css and html

wani•30
@AfricanBambatha69
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I got the desktop version right but for the mobile version I failed to figure it out for the responsiveness

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi wani,

    Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser.

    Hopefully this feedback helps.

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    👾Hello Wani, congratulations for your new solution!

    Your component is perfect, but its not responsive yet. To fix this behavior all you need to do is replace the width with max-width. Note that the difference between these two properties is that width is fixed, example, width: 320px is an container that doesn't get bigger or smaller than 320px but max-width: 320px have the maximum of 320px and can contract when the screen scales down and adjust its size and use relative units as rem or em instead of px to improve your performance resizing fonts between different screens and devices.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    The problem is, that you have used height: 15% and width: 20%. so on the small screens, the 20% will be so tiny. to solve this you have to define a media query for the small screens, or you have to use the max-width property with the min() function.

    max-width: min(400px, 90%)
height: auto;
margin-inline: auto;

    If it was helpful, mark my comment as helpful.

    Marked as helpful
  • David•7,960
    @DavidMorgade

    Hello Wani, congrats on finishing the challenge! let me try to help you with your problem

    The issue here is that you are setting the width to a % and thats scaling with the viewport meaning that at lower screens the component will stretch proportionally, instead of that try using a relative unit like rem, change it from % to max-width: 15rem why max-width? because with max-width you ensure that your container is not gonna overlap from the screen!

    Apart from that I could also recommend you centering your component using flexbox on the parent element instead of margins on your first-part <div>, you can do it just setting the min-height of the body to 100vh, and then using flex-box to centering like this:

    body {
  text-align: center;
  background-color: hsl(212, 45%, 89%);
  font-family: Outfit, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    Try it at your own and tell me how it goes!

    Hope my feedback helps you, if you have any questions, don't hesitate to ask

    Marked as helpful

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