Fixed height possible?

  • Resolved slatbh

    (@slatbh)


    11 years, 8 months 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

    https://www.ads-software.com/extend/plugins/ml-slider/

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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.

    Thread Starter slatbh

    (@slatbh)

    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

    Hi Siatbh,

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

    Regards,
    Tom

    That worked for me as well, thx!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fixed height possible?’ is closed to new replies.