Responsive mobile barcode using basic html and css properties
Design comparison
Solution retrospective
The only challenge i have which i really want help is how to make the page fit to the viewport without having to scroll down despite using the html properties like box sizing: border box;
Community feedback
- @FraCav99Posted over 2 years ago
Hi, Oyetunji!
To remove the scroll bar on small screen, remove the margin from the
top-container
element class. You can use grid or flexbox for center elements on the page, in this case:body { min-height: 100vh; display: grid; place-items: center; }
or with flexbox:
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
Also, the body background color is this
hsl(212, 45%, 89%)
Hope this can help you! Happy coding! :D
Marked as helpful2@JohnsonjrfPosted over 2 years ago@FraCav99 Thank you so much for the corrections you made. i look forward to more insights from you
0 - @PhoenixDev22Posted over 2 years ago
Hello Oyetunji Johnson Remilekun,
Congratulation on completing this challenge.
Excellent work! I see you have received some incredible feedback . I have few suggestions regarding your solution, if you don't mind:
- Use
<main>
landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- Page should contain
<h1>
. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>
withsr-only
class hidden visually and present for assistive tech users.
The commented rules has to be removed /*small reset */ *{ margin: 0; padding: 0; box-sizing: border-box; } body { /* margin: 0; */ /* padding: 0; */ background-color: hsl(220, 15%, 55%); /* box-sizing: border-box; */ text-align: center; font-family: 'Outfit', sans-serif; display: flex;/*Using flexbox properties to center the component */ align-items: center; justify-content: center; min-height: 100vh; /*To that let the body grows taller if the content of the page outgrows the visible page*/ width: 100%; } /*It' an unnecessary div , so you can remove the styles.*/ .top-container { /* width: 100%; */ /* height: 80%; */ /* background-color: hsl(220, 15%, 55%); */ /* margin: auto; */ /* padding: 0; */ /* box-sizing: border-box; */ /* margin: 100px 0; */ /* font-weight: 700; */ } .small-container { max-width: 300px;/*Consider using **max-width** instead in rem, as an explicit width is not really a good way to have responsive layout.*/ /* height: 500px; *//*It's not recommended to set height to component, let the content of the component define the height */ padding: 1rem; color: white; border: 1px solid white; margin: auto; background-color: white; border-radius: 10px; /*border-style: none;*/ /* position: relative; */ } /*There's no need for the absolute positioning*/ img { width: 100%; display: block; /* height: 60%; */ /* position: absolute; */ /* top: 7px; */ /* left: 7px; */ border-radius: 10px; } .text { color: black; /* position: absolute; */ /* bottom: 16px; */ /* left: 31px; */ /* margin: 0 auto;*/ /* width: 80%; */ margin: 1rem 0; text-align: center; }
- Images must have alt attribute. In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
not describes the image.
- Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
- You have used
<br>
, using<br>
is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN
- Do not use
<br>
to create margins between paragraphs, wrap them in<p>
elements and use theCSS margin
property to control their size.
Overall, Your solution looks great. Hopefully this feedback helps.
Marked as helpful1@JohnsonjrfPosted over 2 years ago@PhoenixDev22 Thank you so much for the corrections you made. i look forward to more insights from you.
0 - Use
- @correlucasPosted over 2 years ago
👾Hello Oyetunji Johnson, congratulations for your new solution!
To be right to the point and answer your question about the
viewportheight
:The property that you've asked in your question is
min-height: 100vh;
that will make sure your body will 100% of screen height. This way a scrollbar will be not created.See the changes I've add to your code:
body { min-height: 100vh; padding: 0; background-color: hsl(220deg 49% 88%); box-sizing: border-box; text-align: center; font-family: 'Outfit', sans-serif; display: flex; justify-content: center; align-items: center; }
Don't forget to remove these margins to make the body have a correct align:
.top-container { /* width: 100%; */ /* height: 80%; */ background-color: hsl(220, 15%, 55%); /* margin: auto; */ /* padding: 0; */ box-sizing: border-box; /* margin: 100px 0; */ font-weight: 700; }
👋 I hope this helps you and happy coding!
Marked as helpful0@JohnsonjrfPosted over 2 years ago@correlucas Thank you so much for the corrections you made. i look forward to more insights from you.
0
Please log in to post a comment
Log in with GitHubJoin 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