Make Slider Background Image Responsive

Hello,

The Background Image is resized according to the size of the available area for the best fit. You may consider using a different image for responsive devices based on your Image requirements as it may work best in this case. Example:

[ch_pre type="css"].device-xl .swiper-slide { background-image: url('image.jpg'); }

.device-lg .swiper-slide { background-image: url('image.jpg'); }

.device-md .swiper-slide { background-image: url('image.jpg'); }

.device-sm .swiper-slide { background-image: url('image.jpg'); }

.device-xs .swiper-slide { background-image: url('image.jpg'); }[/ch_pre]

This will definitely work fine. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can use the above code for other Elements as well in the Slider.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Please consider using the Height Utility Classes: http://docs.semicolonweb.com/docs/utility-classes/heights/ . This way you can control the height of the Slider in any Device. Additionally, making the Height of the Slider smaller will automatically make position of the Caption properly aligned based on the Slider Height.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.