How to hide carousel and slideshow banners in mobile view

I would really appreciate if someone could kindly help me step by step on how to hide or disable mobile view of carousel and slideshows like the left column. I would like them to display on tabs but not on smartphones. I have seen in many discussion that it has got to do with editing the @media thing however am not sure where and what to input that in the css file. Kindly help! I am using opencart 2.2. Thank you so much.

You can try editing the .tpl files

catalog/view/theme/default/template/module/carousel.tpl
catalog/view/theme/default/template/module/slideshow.tpl

Find:Change To:

uksitebuilder wrote: ↑

Sat Feb 18, 2017 1:34 am

You can try editing the .tpl files

catalog/view/theme/default/template/module/carousel.tpl
catalog/view/theme/default/template/module/slideshow.tpl

Find:

Code: Select all

class="owl-carousel"

Change To:

Code: Select all

class="hidden-sm owl-carousel"

uksitebuilder, Just tried this however its still the same. The carousel banners and slideshows are still displaying on mobile view. I am using the default theme btw.

Thanks

Apologies, you are right. Looks like own_carousel overrides default bootstrap hidden classes.

Works for me (smartphones are XS size not SM) :
<div id="slideshow<?php echo $module; ?>" class="owl-carousel hidden-xs">

using : opencart 2.3.0.2