Making a Page Responsive

Personify developed its own responsive CSS in order to accommodate mobile web users accessing certain pages on the e-Business website. Once you apply the respective responsive CSS to these pages, they will display differently to a mobile phone user than a desktop or tablet user. The mobile version of the page will display if the width is less than the media query break point, which is the point at which your site's content will respond (responsive CSS) to provide the user with the best possible layout to consume the information. Personify's default value for the media query break point is 580 pixels, but you can change this value, if necessary. In order to change the media query break point, it requires an understanding of HTML and CSS. The media query break point is located in the following skins:

· store. Personify.WebControls.ControlSite\Themes\PersonifyDefault\Store.PersonifyDefault.css

· skin.css

· shared.css

· sub.css

The line of code is @media screen and (max-width: 42.0em). To include larger screens, the max-width value needs to be modified to a value greater than 42.0em. Please note that tablets' width starts at 48em.

In order for the .NET controls to be responsive to mobile users, they need to be placed in the correct layout. Some web controls can only work as intended when placed in either a two column skin, a three column skin, or a full skin. Depending on which Content Management System (CMS) you are using will determine how you are going to configure the page in order to make it responsive.

In this section:

· Responsive Skins

· Making a Page Responsive Using the CMS DNN

· Making a Page Responsive Using a CMS other than DNN