@MelvinAguilar
Posted
Hi @blue-crona ๐, good job completing this challenge, and welcome to the Frontend Mentor Community! ๐
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:
- You need just 2 more properties to center with flexbox
Using flexbox layout:
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another option is to use grid layout:
body {
width: 100%;
min-height: 100vh;
display: grid;
place-content: center;
}
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).
.
Here are some other suggestions:
- Use
margin: 0.625rem
ormargin: 10px
in thecontent-container
selector so that it has some space when viewed on mobile devices.
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
@blue-crona
Posted
Hi @MelvinAguilar, Thank you for the awesome feedback.
I've implemented your suggestions of positioning the content using flexbox and adding some space on mobile devices. ๐