want to reduce the width between two product sliders
-
Hii, my home page product slider is not showing properly. Actually, I have used this css code to increase its width.
@media (max-width: 567px) {
.owl-carousel.owl-drag .owl-item {
width: 160px !important;
}
}
But when I am trying to increase this. Along with this, the above slider products width are also increased. and when I am trying to reduce the above slider width the below product slider reduced too. And the css class i am using is same for both. I am not sure but think, to overcome this issue I have to change the css class of one. but I dont know how to change it. Or if any other solutions are there please help me out on this. Here is the screenshot I attached to show you what is happening actually. also the product image is not coming in the middle insrtead it is showing from the left.
Attachments:
You must be
logged in to view attached files.
Hello,
I am a little bit confused.
Please provide page URL – screen and what you want to do: increase or decrease.
Please remove your custom CSS related to the slider. If you want to change the width of the slider item, you can increase or decrease the number of items in the row.
Please send me your site admin access I will check the settings.
Best Regards
What I am trying to say that when I am decreasing the width of the slider by 80px as shown in the above image 3 the below slider in image 4 is also decreased. And the same happens when I am trying to increase the below slider by 160px as shown in image 2 the image 1 slider is also increased.
I have written the CSS code for this in the homepage custom CSS settings.
Note: I want the below header slider width by 80px as shown in image 3 and and the product slider by 160 px as shown in the above image 2.
Hello,
It is not possible to set the fixed width for the slider item. It would cause problems on other devices. If you want to change the width of the item, increase the number of times in the slider. That is the only way.
Best Regards
I think you didn’t get my problem yet. First, visit my website homepage and just see the product slider layouts, how it’s showing on the homepage. After that, you will easily understand what I am trying to say. And, one thing I would like to mention here, I am talking mainly about the mobile version of my website.
Hello,
Please find the instruction on how to configure the Product grid / Carousel here: https://xtemos.com/docs/woodmart/faq-guides/product-grid-carousel-element/
Slider loop checkbox – enables loop mode that is continuous full rotation without stopping/breaking on the last slide
Best Regards
.
