Tagged: columns, mobile, product slider
Hi Genius’,
Is there a way to make a product slider revert to only 1 column on devices (max-width: 428px) and 2 columns on devices (max-width: 640px). I plan to use 5 column product sliders on desktop on every page. Link to current page with slider
I have searched and found this thread but I couldn’t adapt it as it requires adding to the functions file which I wanted to avoid. I also wanted to avoid the duplication method as I’m hitting the argument with third parties that Google is classing the double slider as “double content”.
Very best wishes,
Annemarie
Hey Annemarie,
It’s breaking to 1 column at 479, and to 2 columns at 767. I think that there would not be much of a point in changing those break points?
Best regards,
Rikard
Hi Rikard, yes thanks. I take your point… my APOLOGIES it was MY MISTAKE because on mobile, I saw the first two products stacking and the slider arrows still showing between the two products which made me think I would be viewing 2 products at a time but now I see all 5 products were stacked so I will just find a way to make the arrows disappear on mobiles less than 479.
Thanks for your valuable time!
— Annemarie
Hi Annemarie,
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
@media only screen and (max-width: 480px) {
.avia-product-slider-container .avia-slideshow-arrows {
display: none;
}}
Best regards,
Yigit
Wow, you guys go beyond, THANK YOU Yigit, I wasn’t even expecting you to fix it for me… you made that so easy for me!
Best wishes,
— Annemarie