Responsive sizing for content slider above device breakpoint sizes

Hey there.

Loving the BB Plugin and getting used to where everything is and setting up preferred default states. All nice and easy.

One thing I’m struggling with at the moment is the responsive state of the content slider above the first break point. So if I have a slider that is say 1200px wide and the fist device break point is not until 900px, the slider gets cut off as it’s height is ‘hard coded’ and doesn’t shrink down nicely as the viewport narrows.

Is there a fix for this as I don’t want raise the break point size otherwise all the columns on the page will be ‘single file’ when there is still plenty of room for them?

Thanks.

Hi Alan,

Can you provide a link to the site in question, so we can take a closer, please?

Also, are you using our slider or a third party?
Have you changed the responsive breakpoints in the Global Settings to custom settings?

Thanks,
Danny

Hey Danny.
Unfortunately, this site is on a local dev server, so I can’t show you a ‘live’ version.
I was using your ‘Content Slider’, and then after sending the ticket I tried with your ‘Slideshow’.

The Slideshow slider is resposive through all levels, but the ‘Content Slider’ on responds below the first break point. I have tweaked these points - See images attached.

So here are the global settings for breakpoints:
BreakPoints

This is the site with the Content Slider first with the Slideshow below:
Desktop

Then as the page width starts to decrease the Content Slider starts to get cutoff, but the Slideshow is responsive:
Large tablet

It looks as though the height is hard coded for the Content slider and only gets adjusted once the first breakpoint is hit.

Hope this helps to explain the situation :slight_smile:

Hey Alan,

That’s weird! I tried the Content Slider module on my local dev and it works just fine, i.e., it shrinks together with the browser. Is that image on your Content Slider a background image? If you check the layout below we have on our site, it’s using a Content Slider and it shrinks together with the browser.
http://demos.wpbeaverbuilder.com/associates/?fl-preview=modern

Ben

Hey Ben

That is weird. What you have is kind of what I was expecting - but didn’t get.
Even when using the Slideshow, on smaller screen devices it starts to add in excessive margins top and bottom that i’m going to have to fight with custom css.

[Content Hidden]

Hi Alan,

The images are not loading in the slider, so it makes it difficult to diagnose the issue. Is it possible for you to resolve the load of images issue, please i.e. they’re attempting to load from your local site.

Thanks,
Danny

Hi Danny.

We’re using meetfinch to share local sites, but realised there is an issue with how BB seems to hard code url’s into the css and js files.
We usually just run a db search and replace to switch a site to a live version, but this doesn’t work with this type of coding.

What are your recommendations for making a dev site live. I tried clearing the BB cache after changing the local url, but that didn’t work either.

I can go around and re-save every image on a site, but that’s not ideal. No doubt there is an easier way to do this.

Thanks - Alan.

Hey Alan,

A standard search and replace won’t do as BB saves data in a serialized array. You’ll want to use a serialized search and replace. I’d suggest re-importing your DB, then run the said script. You can find more info on migrating BB sites on the link below. You’ll also find a link for the script. :slight_smile:
http://forum.wpbeaverbuilder.com/knowledge-base/migrating-a-site-to-another-domain/

Ben

Cheers Ben - Just taking a look now.

[Content Hidden]

Hey Alan,

Re the Slideshow module, that’s actually the intended behavior. The guys are looking to enhance existing modules this year though if you’ve a minute, feel free to add that as a feature request on our User Voice.

Re the Content Slider issue, have you tried visiting your site on an actual mobile/tablet device? Is it having the same problem?

Ben

Hey Ben.

Yup, tried it on various iOS devices and always have the extra spacing. I’m not using the BB theme, but I can’t see that out framework theme is causing this issue.

Just a bit odd. We’ve now made the site fully multilingual too, so hopefully the BB setup will make life nice and easy for our client. As I say, the only issue is with the sliders (and the url’s - still not had time to look into that as it’s only an issue for us showing clients local sites), so still loving the whole BB experience.

I’ll get that request added to the User Voice section.

Many thanks - Alan.