Responsive container : max-width or padding ?
Hi,
When I create a website, I usually use
<section class="container"></section>
and
.container {width:100%; padding: 7rem calc((100% - 1280px)/2);}
and then media queries such as
@media only screen and (max-width: 1280px){ .sct_container {padding: 5rem 8%;}
@media only screen and (max-width: 992px){ .sct_container {padding: 4rem 5%;}
@media only screen and (max-width: 768px){ .sct_container {padding: 4rem 5%;}
Looking at Kevin's course, it seems to be that way
<section><div class="container"></div></section>
Then
.container {max-width:1280px; margin : 0 auto; width:80%;}
I don't understand some things.
Like why is it a better way to add an extra div ?
And is there something wrong with my way of doing things ?
Yous explainations would help me being better, so thanks !2 Replies
the div is there to give you a little more flexibility, but it's not necessary in some layouts. Basically, just don't be afraid to add it if it makes your CSS simpler, but don't sweat it if you aren't using one
Sometimes you might add a section to parent the container if you need a full width bg colour . So your content is contained but the bg is not . If you’re interested kp has a fairly recent video on using grid instead of containers
https://youtu.be/c13gpBrnGEw?si=buPGDhKzOhVN5BMr
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...