Show or hide elements at different screen resolutions

If your website has been designed so that it is responsive, the design of the site adjusts based on the resolution of the screen viewing it. This allows for variance in the design specific to desktop, tablet, and smartphone resolutions.

This also allows you the ability to show or hide elements of the site based on screen resolution. The elements which you can choose to show or hide include the following:

• Menu items
• Modules
• Text, images, embedded video and other elements in any editor, including articles, page intros or outros for Soapbox Donations, Soapbox Events, Directories, Forms, and Soapbox Shop forms
• Taxonomy descriptions
• Individual Salesforce elements on Directories pages
  
• Individual Salesforce elements on Forms pages
  

To choose to show or hide any of these elements, you will need to apply a class to them.

List of responsive classes

The following chart shows each of the classes you can apply. You may apply multiple classes to a single element, if you choose.

Applying classes

How one applies the aforementioned classes to an element on the site varies by element:

• Menu items: In the edit view of the menu item you wish to add the class to, click the Parameters (System) module in the right column. Add the class in the Menu Item Style field.
• Modules: In the edit view of the module you wish to add the class to, add the class in the Module Class Suffix field in the right column. The location of this field in the right column will vary from module to module. In this case only, include an initial space ahead of the class.
• Text, images, embedded video and other elements in any editor, including articles, page intros or outros for Soapbox Donations, Soapbox Events, Directories, Forms, and Soapbox Shop forms: Add DIV or SPAN tags around the elements you wish to show or hide, using the class="" attribute of the tag to add the class. NOTE: You will need to disabled the WYSIWYG editor to ensure that it does not strip out the tags you add. Or, if you wish, you can submit a ticket for us to add your tag as a Soapbox Shortcode.
• Taxonomy descriptions: Add DIV or SPAN tags around the elements you wish to show or hide, using the class="" attribute of the tag to add the class. NOTE: You will need to disabled the WYSIWYG editor to ensure that it does not strip out the tags you add. Or, if you wish, you can submit a ticket for us to add your tag as a Soapbox Shortcode.
• Individual Salesforce Elements on Directories pages: In the edit view of the Salesforce Element you wish to show or hide, add the class in the CSS Keywords field.
• Individual Salesforce Elements on Forms pages: In the edit view of the Salesforce Element you wish to show or hide, add the class in the CSS Keywords field.
  
  IMPORTANT NOTE: Do not use a responsive class that will hide a required field on one or more device resolutions or it will make it impossible for visitors to submit their form when using those resolutions.