Boxed Page Width Issues

Open 12 replies customizationthemetheme-vantage
Ian Thomas
10 months ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Andrew Misplon Staff 10 months, 21 days ago

    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. Ian Thomas 10 months, 21 days ago

    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. Andrew Misplon Staff 10 months, 21 days ago

    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. Ian Thomas 10 months, 21 days ago

    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. Andrew Misplon Staff 10 months, 21 days ago

    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. Ian Thomas 10 months, 21 days ago

    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. Andrew Misplon Staff 10 months, 21 days ago

    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. Andrew Misplon Staff 10 months, 21 days ago

    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. Ian Thomas 10 months, 21 days ago

    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. Andrew Misplon Staff 10 months, 21 days ago

    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. Ian Thomas 10 months, 20 days ago

    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. Andrew Misplon Staff 10 months, 20 days ago

    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.

Have a different question or issue?

Start New Thread