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.

Slider hight issue after upgrading to 2.0.1

  • Creator
    Topic
  • #10420
    pzanon
    Participant

    I have upgraded the theme to 2.0.0 then today to 2.0.1

    I noticed that in all but Firefox the slider height for the full width slides added one or two additional pixels between the slider image and the navigation bar.

    For the slides with the left or right hand smaller image, the height jumps back to normal or even a few pixels less.

    When I add
    .standard-slider-wrapper .slides-wrapper, .tb-nivo-slider-wrapper .slides-wrapper {
    background: none repeat scroll 0 0 #F5F5F5;
    border-radius: 4px 4px 4px 4px;
    min-height: 350px;
    padding: 0 0 38px;
    }

    to my Child themes custom.css the slider height looks OK again for all slides, except that when the browser window’s width is reduced the height remains 350px of course (which is not good for the mobile devices).

    Thanks for any help.

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

    If you want to put a fixed height with CSS on the sliders, that’s perfectly fine, you just need then style that to different heights as you move down the viewport sizes.

    .standard-slider-wrapper .slides-wrapper, 
    .tb-nivo-slider-wrapper .slides-wrapper {
    	min-height: 350px;
    }
    
    /* Tablets */
    @media (max-width: 979px) {
    	.standard-slider-wrapper .slides-wrapper, 
    	.tb-nivo-slider-wrapper .slides-wrapper {
    		min-height: ...;
    	}
    }
    
    /* Mobile Devices */
    @media (max-width: 767px) {
    	.standard-slider-wrapper .slides-wrapper, 
    	.tb-nivo-slider-wrapper .slides-wrapper {
    		min-height: ...;
    	}
    }

    You could also just pop the max-height off for everything tablet and below:

    .standard-slider-wrapper .slides-wrapper, 
    .tb-nivo-slider-wrapper .slides-wrapper {
    	min-height: 350px;
    }
    
    /* Tablets and below */
    @media (max-width: 979px) {
    	.standard-slider-wrapper .slides-wrapper, 
    	.tb-nivo-slider-wrapper .slides-wrapper {
    		min-height: 0;
    	}
    }
    #10430
    pzanon
    Participant

    Thanks… that almost worked!

    But, notice only by using the padding-bottom set to 38. The theme has it set to 40 and I get two pixels showing between the image and the navigation bar.

    Now, when using the code below it’s correct for width >979, but for the slides with left or right aligned images the height is 1 pixel too large.

    .standard-slider-wrapper .slides-wrapper, .tb-nivo-slider-wrapper .slides-wrapper {
    min-height: 350px;
    padding: 0 0 38px;
    }

    /* Tablets and below */
    @media (max-width: 979px) {
    .standard-slider-wrapper .slides-wrapper,
    .tb-nivo-slider-wrapper .slides-wrapper {
    min-height: 0;
    }
    }

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