Content Slider - Mobile width/height on Desktop

Beaver Builder
1

I noticed that after a certain breakpoint, the height of the Content Slider changes based on the width of the Content Slider. Is there a way to enable this dynamic height on Desktop devices?

2

Hi Daniel,

You would be able to do something like that by creating a @media query and adding some custom css that targets the Content Slider at the resolution you want.

Here is a good post on how to create @media queries for mobile devices - You’d just need to change the resolutions.

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Here is the w3schools page on @media queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Hope that helps.

3

They are not using @media queries or CSS to adapt the height. It appears by be triggered/controlled through javascript. I’m just having a hard time nailing down exactly where it is coming from.

4

For anyone who is curious, adding the following to my theme’s CSS did the trick.

.fl-content-slider,
.fl-content-slider .fl-slide { min-height: 0 !important; }
.fl-slide-mobile-photo { display: block !important; }
5

That’s awesome Daniel!

I’m glad you got it working. Thanks very much for sharing your css too:)

Colin