Home>Support>Boxed Page Width Issues

Boxed Page Width Issues

By Ian Thomas, 3 months ago. Last reply by Andrew Misplon, 3 months ago.

I’m trying out Vantage theme on some older sites using Responsive Boxed Layout. I need to set a specific max page width (to suit header images or sliders for example).

I’ve used various suggested CSS methods to specify the exact max boxed site width – but I’m getting strange results. The true on-screen site width, measured with screen ruler and screen grab measurements, is always proportionally larger than specified.

Example: to get a true on-screen site width of 1200px, I have to use:

 
body.responsive #page-wrapper {
    max-width: 1154px !important;
}

Totally mystified.. what am I missing?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 3 months, 14 days ago Andrew Misplon
    Hi, I Work Here

    Hi Ian

    You could try the following rule inserted at AppearanceCustom CSS if you’re using SiteOrigin CSS or CustomizeAdditional CSS if not:

    Page: CSS Snippets

  2. 3 months, 14 days ago Ian Thomas

    Thanks Andrew, I have tried all those CSS width options, but I still get this strange effect where the on-screen width comes out proportionally larger than the width I specify. It’s like there’s an invisible scaling/percentage affecting it somewhere, but I can’t track it down..

  3. 3 months, 14 days ago Andrew Misplon
    Hi, I Work Here

    Hi Ian

    It’s just the #page-wrapper rule linked above that’s to be tried for this change. Please send a link to your site and we’ll take a look.

  4. 3 months, 13 days ago Ian Thomas

    OK, thanks a lot for your attention – please look at this test site: https://www.itsrv.com

    I’ve set it to boxed and responsive.

    Using Classic Editor, with Custom CSS. Not PageBuilder, not SiteOrigin CSS

    I have used the following CSS to achive the desired 1200px site width!
    As you can see I have to use trial and error and make max-width 1154px to get a true on-screen width of 1200px.
    I have also tried removing all other CSS – but with no change..

    #page-wrapper {
	max-width: 1154px !important;
}
  5. 3 months, 13 days ago Andrew Misplon
    Hi, I Work Here

    Thanks for the updates; if you’ve achieved the desired result, that’s great!

    From a CSS perspective, the site container is 1154px wide. Here is that view with the inspector open:

    https://siteorigin.com/wp-content/uploads/2025/04/nav-container-width.png

    Here is a test container checking the browser’s inspector function:

    https://siteorigin.com/wp-content/uploads/2025/04/inspector-test.png

    The container measured for the test is below the image, 350px wide: https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width.

  6. 3 months, 13 days ago Ian Thomas

    Thanks, I also see 1154px width in the inspector – but my actual on-screen width is measuring at 1200px.
    Would you just be kind enough to use a screen ruler, or measure a screen shot of that site, to measure the ‘real’ screen width?
    Thanks

  7. 3 months, 13 days ago Andrew Misplon
    Hi, I Work Here

    Thanks. Did you perhaps have a chance to check the W3Schools link above. Perhaps check the W3Schools link and ensure you’re seeing 350px for the container declared at 350px. If we could agree on a separate width, that would useful.

  8. 3 months, 13 days ago Andrew Misplon
    Hi, I Work Here

    The following will be needed in Custom CSS to help your sticky menu width following the earlier change:

    body.vantage-sticky-menu.layout-boxed .main-navigation {
    max-width: 1154px;
}

    Here is a ruler based screenshot:
    https://siteorigin.com/wp-content/uploads/2025/04/ruler.png

    If you have the result you’re after, that’s all that matters and work can continue! Best with your site.

  9. 3 months, 13 days ago Ian Thomas

    Sorry, I missed the significance of that test.
    That 350px container measures at approx 363px on my monitor and screen ruler!
    My browser window is set to 100% view size, so I’m still stumped.
    I get the same result in a different browser. Maybe my video driver or something…?

  10. 3 months, 13 days ago Andrew Misplon
    Hi, I Work Here

    I don’t use rulers much so unfortunately, zoom was also my best guess! I think your next suggestion regarding the display/monitor is a good direction to check if you wanted to investigate: https://superuser.com/questions/836802/ruler-on-screen-is-smaller-than-real-ruler.

  11. 3 months, 13 days ago Ian Thomas

    Fixed: in my Windows display settings, I had increased the display font size a little – to about 102% or 103%. I thought this only affected on-screen font sizes.

    But in Chrome browser this had the effect of increasing the entire web page display by a similar percentage. I don’t know how long this ‘feature’ existed – I never noticed it before.
    The windows font size did not increase displayed sizes in graphics apps (or the screen ruler) so that’s why I was seeing size disparities.

    My thanks again, and my apologies for not figuring out that this was not Vantage theme-related.

  12. 3 months, 13 days ago Andrew Misplon
    Hi, I Work Here

    No worries! Thanks for the detailed explanation and information as to what happened; appreciate it.

    Cheers for now.

    Andrew

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More