Solve impact on shadow from slider height change

[edsteenhoek]

Hi,

I changed my slider height from 540 to 235 using TB Image Sizes. In order to let the surrounding box adopt the reduced size, I changed the CSS of the slider wrapper to:

#featured .standard-slider-wrapper .slides, #featured .tb-nivo-slider-wrapper .slider {
min-height: 235px;

So far, so good.

The drop shadow behind the slider however needs to be changed to adopt this change too.
As you can see on this image, it’s not automatically done right.

For instance on the right side, I located this CSS:

#featured .slider-wrapper .design-3 {
background: url("../images/slider-design-2-3-light.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 336px;
margin: -168px 0 0;
right: -8px;
top: 50%;
width: 44px;
}

The height of 336 may fit on the original 540 height, but no longer on the 235 height.

What is needed to change the left and right side shadows to match the new height?

Topic

[Jason Bobich]

Hello,

The shadows are images placed around the slider. So, how you want to handle that is up to you. Some ideas —

You could hide the shadows with display:none on those DIVs. Then, there just wouldn’t be any shadow images on the sides.

Or, you could change the height of the shadow DIVs and upload new versions of the background images that are shorter.

Or, another approach would be to change the height of the shadow DIVs and try just changing the size of the shadow background images with CSS background-size property.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

[edsteenhoek]

Thanks.

The second would have worked.

There was another solution I ran in by accident: change the layout from stretch to boxed.
It solved the issue and it turned out that boxed is the style I need.

[Author]

Replies