Hi There,
As we know, when full-width is selected in Vantage theme, the header/menu/footer etc will stick to both side of screen, I managed to find a code from the forum as below,
/*wide content*/
body.layout-full.responsive #page-wrapper .full-container {
max-width: 1300px;
}to narrow the content.
I’m using FHD screen. Everything seems prettey, until I tried to change the scale of the web browser for higher resolution simulaton.
Actually everything is in order, but the website seems stretched at the first glance, because the 1300px for the UHD screen is too small and the menu bar seems too long.
Then I found this website,
https://www.gom.com/
The page seems boxed in UHD res, and full-width in 1080p screen, but the header, menu, content, etc are limited to a virtual edge, just like what to code above does. I think it’s quite a good solution.
Question:
If I want to ajust like this,
Case1: Should I box the website and shift the header, menu, content, etc to a virtual edge?
ps: I tried to set boxed, but the code above seems not working.
Case2: Or there’s another code to make an outer box like this website?
Case3: Or do you have better solution for high res screen optimization?
Since I’m not a programmer, I’m appreciated for your prompt reply with codes.
Hi Zy,
1. This comes down to personal preference. I see no issue with doing this. The CSS you listed isn’t enough to completely replicate the desired effect.
2. You’ll need to adjust the max-width as desired and then set up container borders and apply a shadow to the container. I’d like to help you with this, but unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.
If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.
3. A general hard limit (read: max-width) on the length of the content, which Vantage includes by default, is our recommended solution.
Thanks for your fast reply Alex.
As for the Issue 3 above, do you mean the code
/*wide content*/ body.layout-full.responsive #page-wrapper .full-container { max-width: 1300px; }is recommended?
Hi Zy,
The provided CSS is fine and will allow you to increase the container size. That CSS alone isn’t enough to replicate the outer box design you’re after however and you will require additional CSS to apply the box effect you’re after.