Responsive Wrappers and Layouts
Responsive page wrappers and page layouts adapt to device screen size for optimized viewing on tablets and smart phones. By default, Page Wrappers and eCommerce layouts created after 2016 are responsive. You can choose to update Page Wrappers with more customizations and styling through CSS.
Some responsive layout options are available in Site Options. To enable, open Setup > Site Options, and set the following values to TRUE:
Participant Center 3
Although new Page Wrappers are responsive by default, you can ensure your Page Wrapper is responsive by following the steps below.
In Setup, Page Wrapper Editor, open an existing page wrapper or create a new one.
Note: The Page Wrapper Editor requires permission. See How do I access the Page Wrapper Editor?
Select the Meta Tags process page.
For Document Type Declaration, select HTML 5.
In Additional HTML Tags for HEAD, enter:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">CSS rules, such as in the Sample CSS Code Snippet for Responsive Page Wrappers In it, you'll define styling such as the space allowed in the top margin, whether the header has a background color or border, the appearance of a l links in the header or left nav, where the user login component displays, and so on.
Screen widths for tablet and smart-phone displays using media statements (like
@media only screen and (max-width: 767px)).
Select the Body Tag Attributes process page.
In the Additional attributes for the BODY tag section, insert
class="mobile"as the mobile class tag.Select the HTML Body process page.
In the WYSIWYG editor, enter the elements typically defined at the top of a page displayed on a tablet or mobile device. You can also enter a placeholder for dynamic body content from Components icon > PageWrapper > Page Body Placeholder.
Tip: For the best smart phone display, include your organization logo, an optional graphic, and a few navigation links under the logo.
Select Save.