Hide some modules on responsive mode?

cloudten10

Hi good morning, good people!

Is there a way to hide some modules on responsive/mobile mode?
The reason why I ask is because on desktop everything is wide and beautiful with the modules.
But on a mobile everything looks like clutter and to much information.
So I'm looking at a hack to hide some modules on some pages if its not possible.
Does anyone have any answers or know how to do this? Thanks

saguaros

cloudten10 Hi

Navigate to Layout settings in template >> edit the section you want >> Responsive tab >> select the view port and click the eye icon to hide the position you want.

cloudten10

saguaros I don't want it like that because I want some modules to show on that position.

So i want something to put on module class like d-none d-lg-block.
All though that does not work. Only the code d-none works but that hides it from all devices i just want it hidden on mobile.

saguaros

cloudten10 Hi

To hide on mobile only, you can use: d-none d-sm-block

Check out this docs for more info: https://getbootstrap.com/docs/5.0/utilities/display/#hiding-elements

cloudten10

saguaros it doesn't work the code does not change anything when putting in module class: d-none d-sm-block

dominic

Hi cloudten10,
Give me an admin account for further checking or add the "d-none-mobile" class and add the following CSS code to your template.

@media (max-width: 480px) {
     .d-none-mobile {
          display: none;
     }
}