Prevent the Image Slider from Stretching Your Images

In the Total theme Image sliders have a 100% width added to the images for design reasons. For example if you have a small image in a slider that isn’t stretched this is what happens:

And obviously this looks pretty bad. It causes issues with the slider arrows, captions and slider bullet navigation.

The best solution is to upload larger images that are wide enough for the area in which the slider is located which will also be better quality so overal they will look better.

Of course if you rather not have images stretch it’s a very very simply CSS tweak to prevent images from expanding 100%:

.wpex-slider-media img {
    width: auto !important;
    margin: 0 auto !important;
}

Add A Wrapper To The Slider..

Now if you want to remove the 100% width on images and still have the slider look decent, I would recommend adding a wrapper to the slider so it’s boxed in with a background. Example:

body .wpex-slider-media {
    background: #000;
    padding: 30px;
}
body .wpex-slider-media img {
    width: auto !important;
    margin: 0 auto;
}

And this would be the result:

Last updated on July 16, 2024