Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I have a Vantage Premium home page that is giving me trouble with row widths. When rows have the default background colour, their width behaves. When I make new rows or even duplicate those rows with the proper width and add a background colour (#eeeeee for example) the width extends beyond the main container.
I’m stuck. I haven’t seen this on my other Vantage Premium sites.
Would you be able to advise, please?
Hi SiteOriginSuperFan
Please try editing the problem rows, click the Layout tab and confirm the Row Layout is set to Default and not Full Width or Full Width Stretched.
Thanks.
This is a private message.
Apologies for the hassle. I’m not 100% sure what’s up here. Your CSS is fine. Please try adding the following to hotfix:
/* Page Builder */ .layout-boxed .panel-row-style { margin: 0 -20px; }Hope that helps.
This is a private message.
Glad to hear it’s looking better :) All the best.
This is a private message.
Hi SiteOriginSuperFan
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
This is a private message.
Phew, ok, lots going on here.
The problem is that given the box model in use if we set row padding to 50px and add a background color we see the full row and the row does extend beyond the container. Here is what I’ve added to Custom CSS:
/* Home Page */ .home #main { padding: 50px; } .panel-grid:nth-child(2n) .panel-row-style { background: #eeeeee; }To make this work you’ll need to edit the fourth, sixth etc row:
1. Remove the background color.
2. Remove the 50px padding.
3. Change Row Layout to Full Width.
See my last rule above. That’s just to make life easier so we don’t need to set row background colors one by one.
TLDR: Use my second row as a template for the other even row settings. Let me know how you come along.
(Great reference page if you like cool CSS3 selectors: http://learn.shayhowe.com/advanced-html-css/complex-selectors/)
Hi Andrew,
Thank you so much for the insight into this. Very much appreciated. I wasn’t able to reply sooner as I’m working out on the road, but will take a very close look.
Grateful for your assistance on this awesome Vantage theme which never ceases to trip my mind!
For sure :) Hope you’re able to make progress on this.
I ran into this problem again. If my advice above doesn’t help then please, try my hotfix:
/* Page Builder */ .panel-row-style { box-sizing: border-box; margin: 0 auto; max-width: 1080px; }