@vanzasetia
Posted
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
bodyelement as the page container. This way, you can remove the.containerelement. - To make the card in the middle of the page, you can make the
bodyelement a flexbox container. - Never use
100vwon 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-widthto 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
@peachess-dev
Posted
@vanzasetia thank you for your notes, I will fix it all today! Especially thanks for the advice about not using 100vw :-)
@peachess-dev
Posted
@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 :-)
@vanzasetia
Posted
@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.
@peachess-dev
Posted
@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!
@vanzasetia
Posted
@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.
