@md5dalton
Posted
Hello Neil π
To center the card perfect in the page use flex box:
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
/* padding-top: 20rem; */
}
If you want to make your site responsive, I'd suggest you to go with mobile first approach which means all default styles are for mobile and then define media queries for bigger screen devices. I'll demonstrate:
.article-container {
min-width: 300px;
max-width: 730px;
}
/* Large Devices */
@madia (min-width: 768px) {
.article-container {
display: flex;
align-items: center;
}
}
This way you only have to define the flex box for larger screen devices. Also add some side padding on body
to make sure the card doesn't flush against viewport edges. padding: 0 1rem;
as an example. π