Skip to content
Submitted almost 2 years ago

Responsive webpage for qr component

Kumar Manglam•130
@kumarmanglam
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

How to resize (increase card width) when screen size is decreased? How to change font size according to card size? Do we maintain aspect ratio in these problems?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Kumar!

    For the responsiveness of the card, you only need to set a max-width. The width of the card will increase until the specified value of the max-width.

    I recommend moving all the styling of the .background-section to the <body> element. This way, there is no need to add an extra <div>.

    In this case, the font size of the text is consistent across screen sizes. So, there is no need to think about making the font size relative to the card's width.

    I am not sure about the aspect ratio. But, for the QR code image, add width and height attributes to <img>. This way, browsers will know how much space the images require before they are loaded. As a result, it will prevent the layout shift.

    It is important to keep this as simple as possible. No media queries are needed to make the site responsive. Remove unnecessary HTML elements. In this case, you don't need to wrap any element with a <div>.

    I hope this helps. Happy coding!

    Marked as helpful
    1
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @kumarmanglam

    One more thing, I don't recommend changing the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.

    Marked as helpful
    1
    Kumar Manglam•130
    @kumarmanglamPosted almost 2 years ago

    I find your feedback and suggested articles very helpful. I will try to implement your suggestions and learn from it. Thanks @vanzasetia,

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @kumarmanglam You are welcome!

    0
  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <section class="background-section"> with the main tag and <p class="heading"> with <h1> to fix the accessibility issue.

    For a responsive content give .card a fixed max-width value instead of a percentage width value and give all the sides equal padding values. There will no need for a media query in this challenge if the width is replaced with a max-width. e.g. .card{max-width:320px; padding: 15px}

    Give .qr a max-width of 100% instead of a percentage width. Increase the padding value off. text-section and the border radius value.

    There is no need to give h1 a font-size only p should get a font-size of 15px

    Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    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