@Hassiai
Posted
To center the section on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the main.
To center the section on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
To center the section on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@alexgabriel8
Posted
@Hassiai Thanks for the feedback! That flexbox code you sent worked like a charm! Flexbox is one of the things I need to study next and I got impressed that I was able to center an element just by modifying the body. And about the font-size values, you made me realize I need to review them and the video you sent will surely be helpful.
@Hassiai
Posted
@alexgabriel8 am glad i was able to help you
