Frontend_Mentor_QR_code_component_solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  First you need to fix the HTML before improving the styling. I would recommend making the <p class="header"> as an h1 instead of a paragraph element. Also, try fixing all the accessibility issues. Each issue has a link that will take you to an article that will explain about the issue and how to fix it.

  It is possible to make this website responsive without any media queries. Here are some tips to achieve that.

  • I would recommend making the body element as the page container. This way, you can remove the .container element.
  • To make the card in the middle of the page, you can make the body element a flexbox container.
  • Never use 100vw on anything as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
  • For the card, you only need to set a max-width to limit the width of the card while still allowing it to shrink if ever needed. By doing this, you can remove the media query.

  That's it! I hope this helps! 🙂

  Marked as helpful

  0

  ---

  

  Peachess•20

  @peachess-devPosted about 2 years ago

  @vanzasetia thank you for your notes, I will fix it all today! Especially thanks for the advice about not using 100vw :-)

  1

  

  Peachess•20

  @peachess-devPosted about 2 years ago

  @vanzasetia well, I came up with this solution and that's how it looks like https://peachess3284.github.io/Frontend_Mentor_QR_code_component_solution/ for now. Seems better, right? Still can't avoid media queries though, but you've said that I might be even don't need them, so I'm interesting how so :-)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Peachess3284

  You can prevent the card from filling the entire page by adding some padding to the body element. This way, you can remove the max-width: 90%.

  Also for the height of the body element, use min-height: 100vh instead of height: 100vh. By setting a height, it will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.

  0

  

  Peachess•20

  @peachess-devPosted about 2 years ago

  @vanzasetia thank you again for your advice! Sadly it doesn't work for me now, I've tried to change the code and it looked less responsive than in the version I have for now (I updated it from the first version). But I'll save your recommendation for future, I'm sure it will be helpfull in the future, more complicated projects. Thank you for spending your time and efforts to teach me new things, I appreciate it so much!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Peachess3284

  That's interesting! What did happen when you applied the padding on the body element and used min-height instead of height?

  For your information, I had done this challenge before and I managed to make it responsive without any media queries. I did the same approach as I told you and here is the link to my solution page for this challenge, https://www.frontendmentor.io/solutions/qr-code-component-html-css-VgnhlI8uF.

  0
• 

  Kingsley Akpan•60

  @KhingzPosted about 2 years ago

  Hello there, Great design you have got... Just a quick mention, when setting height as 100vh, use max-height instead. This way if the content of the page goes beyond the limit it stays within your background. Your design viewed on my screen is beyond the given background color.

  Good job anyways...

  1

  ---

  

  Peachess•20

  @peachess-devPosted about 2 years ago

  @Khingz thank you for the kind words and for the remarks! It's so nice that you spending your time helping the newbies like me to improve :-)

  0