Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#bem
P

@95Fredo

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@adityas24

Posted

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

P

@95Fredo

Posted

@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
Discord logo

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