Show Module only on Mobile

timk2023

Is there a way I can get a module to show up only on the small mobile-size layout?

I have some ad banners in the sidebar and header-1 positions but they are hidden when the display size shrinks to mobile. Was thinking it would be nice to put something small in the home-1 position but I would ONLY want it to show up on that small mobile display. Possible?

saguaros

timk2023

Yes, you can tell me which module you want to show on mobile only, I will check for you.

timk2023

saguaros How specific of an answer are you looking for? It would ideally be a Banner module with a small image that would fit well on mobile devices. The idea would be for the module to only be displayed on mobile, while remaining hidden on larger screens.

If you want me to actually create a module and give you access to the site, let me know and I can do that.

saguaros

timk2023 Yes, you can add Bootstrap class so it can be hidden in large screens and show on mobile only.

You can share the super admin account of your site and tell me which module you want to do that, I will check for you.

timk2023

saguaros I created a banner module called "Mobile Banner." It's set for the home-1 position and is currently deactivated. Would like to have it displayed on the mobile layout only. Will add login info above. If you end up making changes to implement this, it would help to know where changes were made in case I end up wanting to tweak myself down the road.

Thanks!

saguaros

timk2023 Hi

You can simply add class suffixes for module you want to hide in appropriate screens. This template is built with Bootstrap 3 so you can use classes like: hidden-xs, hidden-sm, hidden-md, hidden-lg

In this case, you want to show on mobile only so I added classes: hidden-sm hidden-md hidden-lg for the banner module and set module style for it:

Kindly check.

timk2023

saguaros This is perfect. thank you!

saguaros

timk2023 My pleasure 😉