Skip to content
Submitted almost 3 years ago

qr-code-component-main using html/css flexbox and BEM method

Alfredo Brito•250
@95Fredo
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

Why is it when I upload my finished project to FrontEndMentor it distorts my card height, width, font size and everything pretty much. But when I open this project locally using the live server extension or through the github pages it comes out just fine.

Community feedback

  • Aditya Singh•460
    @adityas24Posted almost 3 years ago

    Hey Alfredo great effort! Most probably you are having a large screen computer. You have coded the challenge according to your screen size only.

    If you would have read in style-guide.md file it is mentioned that: The designs were created to the following widths: Mobile: 375px Desktop: 1440px

    So you coded it according to your screen size only, but frontendmentor compares it to screen size 1440px. So try to make it repsonsive. That is when you decrease the screen size, it don't get distorted.

    All the best 🙂👍

    Marked as helpful
    1
    Alfredo Brito•250
    @95FredoPosted almost 3 years ago

    @adityasingh84 Thank you for the feedback, I can't believe it's embarrassingly simple mistakes like this that have me frustrated sometimes.

    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