WordPress.org

Ready to get started?Download WordPress

Forums

Meta Slider
[resolved] Flexslider clame height from start (7 posts)

  1. wm
    Member
    Posted 4 months ago #

    The issue can be found here: http://piani.se/
    The preview works: Yes
    It works with other themes: No
    It works when I disable all other plugins: No
    Meta Slider version: 2.7

    I have a FlexSlider with dimensions 350x350px. I want the sliter to "claim" that space direct and not wait after the images is loaded. It looks stupid when the site jumps up and changes after the images is loaded. This must ofc be responsive.

    I found a sollution to set fixed size in my child.css but then the slider is not responsive.

    Anyone have a responsive code that I can use? The problem have been discussed a long time but a fix is still not implemented in the slider.

    This issue is discussed here. But I dont know where to put this code in Meta Slider plugin or in child theme: https://github.com/woothemes/FlexSlider/issues/174

    https://wordpress.org/plugins/ml-slider/

  2. Matcha Labs
    Member
    Plugin Author

    Posted 4 months ago #

    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.

  3. wm
    Member
    Posted 4 months ago #

    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: http://tritonlite.towfiqi.com/

  4. Matcha Labs
    Member
    Plugin Author

    Posted 4 months ago #

    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.

  5. wm
    Member
    Posted 4 months ago #

    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 :-)

  6. Matcha Labs
    Member
    Plugin Author

    Posted 3 months ago #

    I think this should be fixed in 2.8 - no need for css hacks :)

    Regards,
    Tom

  7. wm
    Member
    Posted 3 months ago #

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

    Thanks for a good job!

Reply

You must log in to post.

About this Plugin

About this Topic