Skip to content
Submitted almost 3 years ago

QR component using CSS

LiBee•370
@Li-Bee
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

Hi All

Would appreciate feedback on this please.

On the wrapper i did max-width: 22rem and width: 90% but did not seem to work if did max-width:20rem and width:90% because when i did this the width became to small it was c280px instead of c320px per the design.

Can someone explain this to me? I still got the width right but would like to know why i had to do 22rem instead of 20rem for this would to work.

Any other feedback on my code would be appreciated please.

Community feedback

  • Grace•31,270
    @grace-snowPosted almost 3 years ago

    The section element isn’t needed on this. Here’s a great article about how it’s ok to use divs https://www.scottohara.me/blog/2022/01/20/divisive.html

    Marked as helpful
    2
    LiBee•370
    @Li-BeePosted almost 3 years ago

    @grace-snow thanks Grace will definately take a look. Do you possibly know my answer to the question above?

    0
  • Han•340
    @hcxwebPosted almost 3 years ago

    Hello LiBee, Well done on this challenge! It seems like after you modified the html and css file, you didn't update your solution in frontend mentor portal, so width: 90% is not showing up when I checked the website. Because you set max-width to 20rem, which is already very narrow, I don't think setting width of 90% actually matters for responsiveness.

    0
    LiBee•370
    @Li-BeePosted almost 3 years ago

    @hcxweb Han would you mind checking again please - i have just added it. Apologies was not coming through for some reason. Its on the article element.

    0
    Han•340
    @hcxwebPosted almost 3 years ago

    @Li-Bee I saw your updated code now. I would just set max-width to 20rem and remove width of 90%. Give it a try.

    Marked as helpful
    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