Adjusting Default 960px Viewport to Increase Horizontal Space? Thoughts?

Design help General
1

The Default “viewport” within a Container is 960px in Webflow, if I’m not mistaken.
Unfortunately, this can often be quite narrow, leaving desire for extra horizontal space.

I’ve noticed sites - even native Webflow templates - that adjust this Viewport.

Typically, I notice a Div in place of a Container, with 1140px or 1170px Max-Width.

I have also seen some examples of Head code that does something similar:
@media screen and (min-width: 1200px) {
.w-container {
max-width: 1170px; }
}

Basically my question is:
1) To get more horizontal space, what is the recommended route/best-practice?
2) Should I use the Head Code above, or should I use the DIV example with Max-Width?
3) And what is the recommended amount of pixels to replace it with?

Any information would be great.
Thanks all!

  • Studio2B
1 Like
2

Hey @Studio2bDesigns

Create your own container. Just use a div with a class container and add the max-width you want.

I’m always using divs, not Webflow containers and sections.

Webflow container is just a div with some styles applied.

Piter :webflow_heart:

3

@PeterDimitrov -

  • I noticed in one of the “Default” Webflow Templates, I believe it was the Simple “Business” template, the DIV used instead of a Container, had a “Max-Width” of 1170px (or 1140px, I can’t quite remember), BUT IT ALSO had a “Width” set to 100%… Can you explain this? and is this 2nd step needed? etc…

  • Also, how will this affect the “Responsiveness” of the page, compared to using the “Default” Webflow Container of 960px? Does it include the same type of “safeguards” as the Default Webflow Container does, and allow you to remain Responsive?

  • Lastly, what Width for the new “custom” Div Container would you recommend?
    Again, on some sites, even WF templates, I’ve noticed 1140px and 1170px so far.
    But, WHY these numbers? Is there a reason?
    EX: Does it need to divide evenly with the Responsiveness grid, or something like that?
    …Or could I simply use 1080px and be okay?

Summary: I just want t make sure I don’t over-do it, and end up with a bad result for responsiveness.
…And that’s also why I was curious about the “Head” Code I posted…
I’m not certain, but it seems as if it makes sure the User has at least 1200px available, prior to actually committing the Viewport change to 1170px or what not… unless I’m mistaken… But that seems like a good idea if that’s the case, right?