Flexslider clame height from start

Hi wm,

The code posted on the flex slider page won’t work anyway I’m afraid.

To calculate the (relative/responsive) height before the slideshow has loaded we need to know the displayed width of the slideshow.. but we won’t know that until the slideshow actually displays on the page. By that point it is too late – the rest of the content is already showing.

I’ve spent a few hours trying a few different approaches/hacks and haven’t got very far, I don’t think there is a reliable way to do this – if there was it would be a great feature for Meta Slider so it’s a shame nothing seems to work well. I guess it is just a limitation of CSS as there is no way to give an element a height based on it’s width, and none of the CSS hacks out there seem to work nicely with meta slider.

Regards,
Tom.

I temporary fixed this with an ugly oldschool trick. I added a 1x350px transparent png to the jeft and it looks pretty alright.

There should be some kind of code that could set a responsive “box” to claim the area with parameters. Or is if forced to be some kind of frames for that?

This demo theme page have a slider that dont bounce up. But I dunno how they coded it: https://tritonlite.towfiqi.com/

Hi Wm,

That example isn’t responsive, so they’ve just fixed the height on it. Responsive slideshows only know their height once they’re displayed. The 1x350px image seems like a niceish workaround.

The responsive box idea is the route I was going down. It needs to be done with pure CSS though as the box needs to be ‘present’ as soon as the page loads. I found a few different ideas (tried maybe 8 or 9 approaches) but none of them worked well for me.

Regards,
Tom.

Here is my last fix for this issue. No more PNGs only easy code that acually works more responsive.

Put this in your page content (text view example, change to your slider id)

<div class="slidersize1"></div>
[metaslider id=1]

Put this in your child theme style.css (example)

/* Meta slider - Set slider height 1 */

.sliderheight1{
        width:1px;
		height:370px;
	    /* Activate this color to test the heights */ /* background-color:#FF0000; */
		float:left;
		}

		@media (max-width: 800px) {
.sliderheight1{
        width:1px;
		height:345px;
		float:left;
		}
}

@media (max-width: 400px) {
.sliderheight1{
        width:1px;
		height:240px;
		float:left;
		}
}

Play around with the diffrent heights depending on your sliders heights and widths .

This solved my design issue anyway ??

I think this should be fixed in 2.8 – no need for css hacks ??

Regards,
Tom

I can confirm that this issue is solved in version 2.8.

Thanks for a good job!