Hide Full Carousel on mobile

I would like to hide the full carousel module on "Home" menu item when display is less than 960px and display Image Module instead.

Currently, Carousel displays only on "Home" at all sizes and Image Module displays on all other menus regardless of screen size.

Also, these two modules are in the same position (header1).

How might I accomplish swapping full carousel module with image module on "Home" menu only when display is less than 960px? Whether it happens with CSS, PHP, module settings in administrator or some combination, I don't really care. I just need to know where to edit.

Site is temple8.net

Thanks!

Hi,

You can create a new Custom HTML module (just put the static image in it) in the same position where Hot Full Carousel is published. Add Module Class Suffix, in example -formobile

Then edit file template_css.css and at the bottom of this file add:
Hope this helps.

Cool, I actually found the other media queries and just dropped the class definitions above in each of those media queries. Also added a suffix of -nosocialmobile to the social media module in top2 in order to show/hide that as well. Everything functioning just like I want it now. Thank you!

Followed all the instructions you gave below and the custom module with the banner is still showing on mobile view, please is there any other thing that i need to do, to make it work.

I look forward to hearing from you soon. thank you very much for your usual support.

Hello,

What's link of your site?

Thanks,
Milos

The Website link is sprovia.com/

I look forward to hearing from you soon. thank you for your kind responses.