Boost recurring donations this giving season with the new upsell prompt!Learn How >>

Show or hide elements at different screen resolutions

updated

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.

ClassPhones
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.
Have more questions? Submit a request
Article is closed for comments.