Slider hight issue after upgrading to 2.0.1

[pzanon]

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.

Topic

[Jason Bobich]

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;
	}
}

[pzanon]

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;
}
}

[Author]

Replies