Responsive Layouts

You can create a new page wrapper, or edit an existing one, to make the page wrapper responsive. Responsive layouts are adaptable to device screen size for optimized viewing on tablets and smart phones. You can also make wrappers that allow more customizations and styling through CSS than the classic wrappers.

Some responsive layout options are available in Site Options. To use enable these features, open Setup > Site Options, and set the values to TRUE.

To make other pages and components responsive, follow the directions below.

Note: HTML 5.0 wrappers and pages require IE 9.0 or above for display on a personal computer.

  1. Open an existing page wrapper or create a new one.

  2. Select the Meta Tags process page.

  3. For Document Type Declaration, select HTML 5.

  4. In the Additional HTML Tags for HEAD, enter:

    • <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">

    • the CSS rules. For example, define the space allowed in the top margin and if it the header has a background color or border, the appearance of a list of links typically found in the header or left nav, where the user login component displays and so on.

    • The screen widths for tablet and smart-phone displays using media statements (like @media only screen and (max-width: 767px)).

  5. Select the Body Tag Attributes process page.

  6. In the Additional attributes for the BODY tag section, insert class="mobile" as the mobile class tag.

  7. Select the HTML Body process page.

  8. 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: To keep the page display short for a smartphone, you should only include your organization logo and maybe a graphic depicting the event and a few navigation links under the logo for contacting the organization.

  9. Click Save.

Refer to Sample CSS Code Snippet for Responsive Page Wrappers for help with your CSS.