How does one implement a responsive module class?

The template has these two responsive classes for phone-sized displays:
visible-phone
hidden-phone

Say I want to hide the site banner for phone-sized displays. The banner currently resides in its own module, and appears in the template's grid in the "top1" position.

1. Where would the code for the "hidden-phone" class reside? E.g., in the banner's module, in custom CSS?

2. What is the syntax for the relevant code?

Jim

Hi Jim,

You would add the responsive module class to the module class box in the module itself

You don't need to add any css if you want to hide the module

Cheers
Paul

Paul,

Could you please identify exactly how I'd use "module class box"?

In Extensions > Modules > [module name] > Advanced, we have a "Module Class Suffix" box and a "Module Style" box. Would I enter "hidden-phone" in one of these?

Jim

Hi Jim,

It's the advanced tab > Module Class Suffix

Cheers
Paul

Cheers
Paul

That works. Thanks, Paul.

Jim

Paul, can I put more than one code in the Module Class Suffix box? If so, how do I separate them?

Jim

No problem

Cheers

ah ok just add a space between classes

Cheers
Paul