This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Changing size of slider/wrapper height

  • Creator
    Topic
  • #7864
    socialkenya
    Member

    My client has asked me to reduce the height of the slider, and I’ve tried several different bits of custom CSS without success. I’ve inspected the elements through Chrome’s handy tool, but I’m not seeing anything that dictates the height of the slider and wrapper in the CSS on the sidebar.

    Here’s what I wrote (which is probably completely out of left field, given that it’s not changing anything):

    #featured 960px x 276px}
    }
    #tb-slider-homepage.slider-wrapper.standard-slider-wrapper.slider-has-mobile_fallback 960px x 275px}
    }
    .flexslider img 960px x 275px { margin-top: 0; margin-bottom: 0; }
    }
    .slide-body 950px x 275px}
    }
    .slider-inner.hide-nav_standard.hide-nav_arrows.hide-pause_play.hide-full_nav 960px x 275px}
    }
    .grid-protection 960px x 275px}
    }
    .element-inner-wrap 960px x 275px}
    }
    .element-inner 960px x 275px}
    }
    .element.featured-element-1.element-slider.first-element.last-element.element-slider-standard.hide_on_ 960px x 276px}
    }
    .featured-content 960px x 276px}
    }
    .featured-inner.has_builder.has_slider_is_first.slider_is_last 960px x 276px}
    }
    .slides_wrapper.slides-wrapper-homepage 960px x 275px}
    }
    .slides-inner 960px x 275px}
    }
    .slider.standard-slider.flexslider 960px x 275px}
    }
    .slide.tight.media-full.image-slide.full-image 960px x 275px}
    }
    .slides 960px x 275px}
    }
    .media.image 960px x 275px}

    Basically I’ve just tried to assign a fixed width to each element that applies to the slider area. Have I missed one, or am I just barking up the wrong tree entirely?

    Thanks,
    JC

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #7876
    Jason Bobich
    Keymaster

    I’m not quite sure what the code you’re posting here means, but the height of the slider is determined by the size of the images. And in addition, the featured area slides have a 350px height set with CSS.

    #featured .element-slider .standard-slider-wrapper li.slide { height: 350px; }
    #7877
    socialkenya
    Member

    The slider wrapper isn’t determined by image size. I tried that first. If I crop all the images down, the green textured background shows above the image, filling in the difference between the 350px container height and the height of the image. For instance, if I crop to 275px, I get 75px of background at the top of each image in the slider.

    But thanks for the bit of CSS. I’ll give that a go.

    Cheers,
    JC

    #7886
    Jason Bobich
    Keymaster

    The slider wrapper isn’t determined by image size.

    Sliders all over your site are determined by the height of the images. And as I said, in addition, sliders in the featured area specifically also have a height set with CSS.

    #7897
    socialkenya
    Member

    I cropped all the images in the homepage slider to 960×275 and added this bit of coding to Custom CSS:

    #featured .element-slider .standard-slider-wrapper li.slide { height: 275px; }

    If you take a look at http://multiani.com/equatoriateak, you’ll see that the wrapper is still 960px x 350px, leaving a large textured area beneath the slider, plus the green bar below that–neither of which my customer wants.

    What else do I need to change to get the featured area height to adjust correctly for these images? I’ve tried everything else I can think of (as my first post no doubt demonstrated!) without success.

    Thanks,
    JC

    #7898
    socialkenya
    Member

    ::Sheepish grin::

    Fixed it. I had a rogue bracket in my Custom CSS that was stopping the height from adjusting with that little line of code. Realized it, deleted it, and there we are — perfectly sized slider container.

    Thanks for the help!

    Cheers,
    JC

Viewing 5 replies - 1 through 5 (of 5 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.