We have added the coyote grid slider (http://www.coyotewp.com) within a SiteOrigin Editor widget. The row layout has been set to Full Width Stretched however the slider will not load as full width. It will snap to full width once the browser screen size has been manually adjusted (Chrome, FireFox and Safari) however if the page is reloaded the slider goes back to non-full width.
The page in question is here. http://www.varipix.com/content/ All the content within the other Page Builder rows works perfectly except for the slider.
I have contacted the maker of the slider and his solutions haven’t worked. He said in the source code of the page there is a parent element with width defined at 1170px and this could be causing the problem. He sent me this custom CSS:
#pg-1260-1, #pg-1260-1 .panel-grid {
width: 100% !important;
max-width: 100% !important;
margin: 0px !important;
padding: 0px !important;
height: auto;
}
This CSS did not solve the problem. I’m reaching out to Site Origin to see if there is anything within the Page Builder settings that could be contributing to the slider not going full width. Maybe the Page Builder settings – full width container – needs to be something other than “body”? Any advice or help would be much appreciated.
Cheers
Hi Varian,
I just had a quick look at your website and it looks like you’ve managed to resolve this issue. Is this the case? If not, I can’t seem to replicate this issue, can you please create a separate page with just the slider on it? I suspect that may help me to replicate it.
Hi Alex,
Thank you for looking at the website. We still haven’t solved the problem completely as the slider is now being stretched 100% horizontally but not vertically. The slider should only show 2 halves on each slide like this http://www.coyotewp.com/coyote-demo/demo-coyote-grid-slider-full-widht/
I’ve made 2 pages for you. This page is the slider within the page builder SiteOrigin Editor widget. I’m adding the slider using short code as instructed by the slider creator. http://www.varipix.com/content/test-slider/ As you can see the slider looks like it’s getting staggered over the width of the page. My row settings are full width stretched.
This page just has the slider short code pasted into the regular word press text editor. http://www.varipix.com/content/test-slider-text-only/ The slider functions fine on this page but I cannot get it to fill the full width of the page – which is why I was trying to use it within Page Builder.
Any advice will be greatly appreciated.
Cheers
Ian
Hi Ian,
Very sorry for the delay.
The first slider looks like that due to the row set to full width stretched. The slider is setup (based on its code) to display as much as possible rather than stretch the size of each slide to ensure it doesn’t show more than a single slide. I would recommend taking a look at its settings to see if there’s a possible setting to avoid this or to have the slider itself handle being full width.