slider in one column

Question

Hello,

I want to use one of the canvas template sliders (Flex or Owl) in my website, but only in a specific area of the page. The basic structure of the lay-out is:


Tekst content
Slider in this column

My problem is that when I insert the code for the slider in the md-4 column, the demo images are not resized to fit the div or container in which the slider is placed. In fact the images are being cropped and you can only see the left part of the image and and the left navigation arrow. I tried to add an extra style attribute
.FitContain {object-fit: contain;
to almost every div and image in the code but resizing does not occur.

How can I adjust the size of the images (and slider size) so that they fit 100% in the smaller div?

SemiColonWeb · Accepted Answer

Hello,

Can you please provide us with a Live URL with this code implemented so that we can check out the exact issue, since this should already work by default considering the Responsive Flex/Owl Slider was created so that it could be implemented in any Column Width. We suspect there is some issue with your code which is why it is not working properly. Additionally, it is recommended to Validate your HTML Code from here: https://validator.w3.org/ so that you can detect any unexpected errors from your end which might help you fix this issue. Thanks for your Patience!

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.