I want a full-width home page and no matter what I try I cant seem to find the css setting that will fix this issue.
I have ensured that I have
1. Edit any Page Builder row by clicking the wrench icon on the far right.
2. Click the Layout tab.
3. Locate the Row Layout drop down menu and select Full Width Stretched.
4. Also the page template is set to landing page no header
I am able to fix the issue with inspect element by erasing the border-box or changing it to content-box but that does not fully work when I change the setting in the virtue.css file. (It does cut the gap in half which looks good but not perfect)
*, *::after, *::before {
box-sizing: border-box;}
Any help would be greatly appreciated
the site is: http://aisledeliver.com/
Hi Novice.html
Thanks for reaching out. I did a quick test now with Virtue and a Text widget. Here is the result of Full Width Stretched:
Everything seems to function as normal. Can you create a test page on your site, set up a Full Width Stretched row with some demo content and send us the link?
Thanks
Hey Andrew,
Please see the following test page: http://aisledeliver.com/test-content/
I seem to have something on the right side panel that causes the default background color to show.
I just noticed that you mentioned virtue but I am using virtue premium.
I could be wrong in this case but there isn’t usually a big difference in the CSS structure of a theme when comparing the free and premium versions.
I don’t know why but in this page template Page Builder can’t break out of it’s container which is:
@media (min-width: 992px) { .col-md-12, .span12, .woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { width: 94%; } }So, unfortunately, you’d either need to stop using Full Width Stretched OR use Custom CSS to edit the above rule for certain pages.
Do you happen to know what custom CSS script I can use? I have never written a custom script only performed small changes to existing CSS…
Sure, give ours a try:
https://wordpress.org/plugins/so-css/
Go to Plugins > Add New > search for SiteOrigin CSS.
Install and activate.
Go to Appearance > Custom CSS.
Insert:
/* Containers */ @media (min-width: 992px) { .col-md-12, .span12, .woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { width: 100%; } }Just try that out. A test for the moment. I’m basically fixing the symptom as I’m not quite sure of the root. I have a feeling that might negatively impact other pages. If this helps for Page Builder pages we might need to put a child theme together to conditionally add this for Page Builder pages. Let’s get to that if necessary.
Let me know how this goes.
Same problem all full width stretch options are in effective on multiple sites now causing websites to look completely wrong :-( website in question – http://redgateinn.co.uk
Looking forward to a swift and easy fix
Hi Dakine1981
We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.
Page: New Thread
If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.
Hi Andrew thanks for getting back to me, I have dropped in the CSS script exactly as you typed it into the CSS edit but has had no effect at all :-(
hope we can resolve this issue ASAP
thanks for your time
Hi Dakine1981
Every WordPress installation is a little different. For this and many other reasons we prefer to work a question per thread. If you’re keen to jump in on threads and help the person who opened it, that’s awesome. If not, we kindly ask that you open your own. That way we can assist in a personal manner and help you through your challenge as soon as possible. We’ve tried working group problems in threads in the past. Often we land up with slightly varying challenges leading to extra communication and misunderstandings.
We’re super keen to help out :) You can open a thread here: Page: New Thread