Archived topic
Fixed width container on desktop
1 reply · Started by Ingrid on May 17, 2018
Hi there
I've looked at a few threads but couldn't quite find what I'm looking for.
If someone uses the zoom function on their browser on desktop, I'd like for the white body container to stay the same width and only the text to become larger. Is this possible?
At the same time, the website title and description can become larger, but the width should not go out of sync with the body container.
Hope that makes sense. Any help is much appreciated.
Hi Ingrid,
you can try experimenting with this CSS:
body .grid-container {
max-width: 50vw;
}
.inside-header .grid-container,
.inside-navigation .grid-container {
max-width: 840px !important;
}The first rule sets the main body container to 50% of the viewport width. So adjust that accordingly. The second rule should keep the header and logo as it is currently.
VW - Viewport Width is treated differently by different browsers when zoomed, so may require some experimenting.
