> main {
Why not target <body> instead? <main> should not have content that is shown on other pages, like headers, footers, and sidebars, but it makes sense to have this CSS affect those areas.
Why not target <body> instead? <main> should not have content that is shown on other pages, like headers, footers, and sidebars, but it makes sense to have this CSS affect those areas.
html {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
@media screen {
body {
max-width: 40rem;
margin: 1rem;
}
}
I know IE5.5 doesn't allow resizing of the body, but it was fixed in IE6.
If you're using flexbox it's probably not your chief concern anyway.
I agree, and making those changes would mean I can switch from main to body in my css. The main complaint I have is then article and main seems redundant. What are your suggestions? Semantic HTML5 is hard :(
[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ar...
[1] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
If you aren't adding top nav sections or site-wide footers, your current approach is fine.
If you do want to experiment with those, you'll find the (correctly-constrained!) body content looks funny with copyright footers floating in space somewhere to the left or right of the main text.