Using the Template Media Query Page

Use the Template Media Query page (IB_DOCTPLMEDIA_SEC) to code media queries. This page provides an alternative to defining media queries using the Media Queries page. You can directly code media queries in CSS3 format on the page.

To access the page select PeopleTools > Mobile Application Platform > Template Designer and click the CSS tab. Check the Media Query box and then click the Add/View Media Query link.

Image: Template Media Query page

This example illustrates the Template Media Query page.

Use the long edit box to code your query. When using the Template Media Query page to code media queries, use the following CSS3 attribute:

link media=

An example of a query is:

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" href="[CSS_FILE_NAME]">

Where CSS_FILE_NAME is the name of the CSS file name that appears in the CSS Name field. The framework will generate the proper URL reference to that CSS file. Click the OK button when you are done coding your query to return to the Template Designer – CSS page.