WordPress.org

Ready to get started?Download WordPress

Forums

Meta Slider
[resolved] Fixed height possible? (5 posts)

  1. slatbh
    Member
    Posted 1 year ago #

    I'm trying to use the slider in a responsive theme to display images in the header.

    I would like the images to maintain their height with a varying width. I've tried using

    .metaslider .nivo-main-image, .metaslider .nivo-slice, .metaslider img{
    height: 250px;
    }

    in CSS to set the height. It works until the image changes, but then I see that height has gone back to 'auto' when using the element inspector in Safari. I assume that this is happening in the javascript of the plugin (i.e. recalculation).

    Is there any way to overide this? I suspect not but would like confirmation.

    Thanks in advance

    http://wordpress.org/extend/plugins/ml-slider/

  2. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    I also suspect not, I don't think it's a good idea to try setting heights with responsively scaled images.

    If you put an !important after your CSS rule it should override the styles that nivoslider applies to the elements automatically, but I suspect it would break it - worth a try though.

    Regards,
    Tom.

  3. slatbh
    Member
    Posted 1 year ago #

    Hi Tom

    Thanks for your reply, I was too busy to answer yesterday.

    I managed to achieve what I wanted by doing 2 things. First, was your suggestion of adding the !important to my CSS height above and add a minimum width.

    .metaslider .nivo-main-image, .metaslider .nivo-slice, .metaslider img{
    height: 250px !important;
    min-width:1200px;
    }

    The other thing I needed to do was set the enclosing <div> for your slider to be:

    #sliderholder{
    width: 100%;
    overflow:hidden;
    }

    Thanks for your help and I copy my solution here to help others

  4. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Siatbh,

    Great to hear you got it sorted, and thanks for posting the solution!

    Regards,
    Tom

  5. smit_ralph
    Member
    Posted 9 months ago #

    That worked for me as well, thx!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags