If your Soapbox Engage site template 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:
- Text, images, embedded video and other elements in any editor, including page intros or outros for Soapbox Donations, Soapbox Events, Directories, and Forms
- 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.
Class | Phones 767px and below | Tablets 979px to 768px | Desktops Default |
---|---|---|---|
visible-phone |
Visible | Hidden | Hidden |
visible-tablet |
Hidden | Visible | Hidden |
visible-desktop |
Hidden | Hidden | Visible |
hidden-phone |
Hidden | Visible | Visible |
hidden-tablet |
Visible | Hidden | Visible |
hidden-desktop |
Visible | Visible | Hidden |
Applying classes
How one applies the aforementioned classes to an element on the site varies by element:
- Text, images, embedded video and other elements in any editor, including page intros or outros for Soapbox Donations, Soapbox Events, Directories, and 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.
- 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 page: 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.