WooSlider Image Width and Height

By default the WooSlider width is built to adapt to the width is of it’s container. For example, if you insert WooSlider into your blog post, it is going to be the same width as your blog posts. If you included the WooSlider on a full-width page, (with no sidebar) then this would adapt to be the full width of the page. There is no height setting in WooSlider because this would ‘break’ the responsiveness, meaning, if you forced the height to be 500px then tried to view this on a smaller screen, the slider would not scale correctly, because you have forced the height of 500px.

In order to have the most control over the slider image size, we recommend that you save your images out to the exact height you need before uploading them.

This might not be possible for everyone however, so you do have the option to control the width with some custom CSS.

If you were to insert a slideshow with a shortcode, you can optionally include a WooSlider ID. For this example, we will use the following shortcode to insert our WooSlider into our blog post:

[wooslider id="small-blog-2" slider_type="slides"]

Where the id=”small-blog-2″ can be set to whatever you’d like. Then to make this smaller and sit to the right of my blog post I will add the following to my custom.css:

#small-blog-2 {
width: 60%;
float: right;
}

It is recommended that you use a % to limit the width, so that the slider remains responsive. If you were to set this to 500px for example, this would not scale responsively on smaller screens, since the width was fixed at 500px.

In this example, if you’ve uploaded an image where the height is greater than the scaled width, then the image will crop the height, according to the correct width you’ve scaled down to. If you do not want your image to crop the height automatically, then it is best if you upload your image with the exact cropping you’d like.

Please note: We do not recommend that you set a fixed height for your slider as this will break the responsiveness of the slider. Instead we recommend that you save out your images all at the same height before uploading to ensure a consistent height across all images while keeping the slider responsive.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top