Melvin Aguilar ๐ง๐ปโ๐ปโข 61,220
@MelvinAguilar
Posted
Hi @Rhythm001 ๐, good job on completing this challenge! ๐
I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops.
- The container isn't centered correctly. You can use flexbox to center elements:
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Your styles . . .*/
}
/* Remove the margin and update the width*/
.container {
background-color: hsl(0, 0%, 100%);
max-width: 313px;
/* width: 22%; */
/* margin: 108px auto; */
border-radius: 15px;
}
Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
1
Rhythmโข 30
@Rhythm001
Posted
@MelvinAguilar Cool. Thank you!
1