So I wrote this article: 5 tips to become better at CSS and I got the following question:
Using width of 100vw for main in tablet and smartphone it ok for me. what about for desktop, large screen, mondern big screen?
So I wanted to share a few tips on how to tackle the responsive content also you rarely want full screen on desktop if you do a blogging site or anything where you need to read actually. It's often suggested content isn't more than 50-60 characters some say its okay to go to 75. Side note this can be done with max-width: 75ch; with pretty decent support.
Layout a page for the big screen
Given this layout:
And given this code:
<main>
<nav></nav>
<aside></aside>
<section></section>
<footer></footer>
</main>
main {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"nav nav"
"aside content"
"footer footer";
grid-template-columns: 230px 1fr;
grid-template-rows: 50px 1fr 30px;
}
nav {
grid-area: nav;
}
section {
grid-area: content;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
We a few directions that we can take this in which im, this often comes down to which design direction you're taking but gonna go over a few options below.
Max-width around the whole thing
main {
max-width: 1100px;
}
So we could slam a max-width around the whole thing. This is rarely what you want.
I worked on a website once for one of the biggest festivals in europe and we spent quite a bit of time making it support full screens and if you printed the band list it looked like the poster and all that sort of fun stuff and then next year another agency got the contract and they slammed a max-width around it.
Can't say im for it so I wanna touch on a few other ways to do it.
Contained content
So our section is normally our main content and here we can create a div/article/content box to contain our text in.
This is often the approach I would take if I where to add text content could look something like this:
The code to achieve this is:
<section>
<article>
<!-- your content here -->
</article>
</section>
section {
// ...
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
}
section article {
max-width: 700px;
margin: 0 auto;
padding: 20px;
}
Okay so a few things has happened here, we added a scroll box to our section and some padding this is just for visuals but on the article its a different talk.
Reason for adding padding on your text that is wrapped Is that h1's, p's ect. have default margin and if the wrapper does not have padding the margins will float outside of the box which makes our UI unpredictable, added a screenshot below for reference:
This is also why I suggest any text tag (h1, h2...) has no margins on default and would set that in the root.
Back to our code: max-width: 700px is to make sure the content doesn't overflow 700px but on smaller screens it will by default fill the parent container, so its "responsive by default" you could say. That's why I tend to avoid static widths like width: 700px on anything else than grids where you wanna fix it for the layout until say a mobile menu or similar.
Last but not least we added margin: 0 auto this is to center the content, this might not always be what you want, but you can just remove it to have the content box stick to the left.
The navigation issue
By choosing the option above we have ourselves another problem and that is that your top and sidenav now floats far away from your content on bigger screens.
This is why I tend to not like "mobile" first approaches but that's for another article.
So how to fix it you say, lets get right to it:
This above is what im going for and this is because now our content is centered but each of our sections aren't limited to the content box, because sometime you need a part of the page to have a different color which spans the whole page it just looks better, but it takes a bit more markup and code.
<nav>
<div class="nav-content-wrapper">
<!-- nav content -->
</div>
</nav>
<section>
<div class="section-content-wrapper">
<aside><!-- aside content --></aside>
<article>
<!-- article content -->
</article>
</div>
</section>
As you might have noticed I removed the footer its just for the similicity of the example you could do the exactly same as I do for the navigation in this example
For styling:
main {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: 60px 1fr;
}
Note when using these fixed sizes on grid you need to update the navbar size if the content of the nav bar changes
nav {
padding: 0 20px;
}
.nav-content-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin: 0 auto;
max-width: 1100px;
}
So for the nav we moved all but the left/right padding from this element, this is so that when the screen its small the container still have some padding
Then on the nav we added the padding top/bottom to only have padding their to align the content to the section content below and our max-width and center position
section {
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
}
.section-content-wrapper {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 230px 1fr;
}
For our section we done mostly the same as nav wrapped the content in a wrapper with max-width and centered it with margin: 0 auto and then we created our grid with the fixed width of the sidebar.
Bonus tip:
Given all the changes we made above inside our article all of our text tags could be optimised by using the 75ch unit to show a maximum length of 75 characters
This can be done in multiple ways here are 3 quick ones
Article wrapper:
.section-content-wrapper {
grid-template-columns: 230px 75ch;
}
All elements in our article:
section article > * {
max-width: 75ch;
}
Some of the elements in our article
section article p,
section article h2,
section article h3 {
max-width: 75ch;
}
Hope it helped - if you have any questions to hesitate to add them in the comments below
If you liked it subscribe for more content like this
//Cheers
Top comments (0)