Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Responsive design rules

Responsive design rules are mobile rules based on media queries that you can apply on page or template level. You define the device types and characteristics to which the rules are applied with the help of predefined media query group of rules for the most popular smart phones and tablets. Once the device requirements are met, you define how to display pages on these devices. You do this by choosing one of the following options:

  • Layout transformations
    You choose a CSS file to be applied to optimize the layout of the page for different screen sizes or simply modify the transformation of the default layouts.
  • Open a specific page within the site
    This could be, for example, a mobile version of the site.

In addition, you can also transform the navigation of the website, so that it fits your requirements.

For example, you can define that for a tablet, if a page has 4 columns, they will be displayed as 2 rows and 2 columns, but for a smartphone, 4 columns will be displayed as 4 rows. In addition, you can specify that a conventional navigation bar on top of the page will be displayed on a mobile phone as a dropdown menu.

Thus, a responsive design rule consists of:

  • Definition of the devices on which to apply the rule – the media query
  • Definition of how the page content is displayed – transformation of the layout or redirect to another page
  • Definition of navigation transformations (optional)
This section contains:
  • Media queries
    A media query defines a set of devices and their characteristics. In Sitefinity CMS, you can choose from a list of predefined media queries as templates that you can edit or simply create a new media query from scratch.
  • Layout transformations
    Once you place a layout on a page, Sitefinity CMS, through adaptive rule-sets, can optimize these layouts for the mobile web. Thus, you can take advantage of layout transformations for all Sitefinity CMS built-in layout widgets.
  • Redirect to another page
    When you redirect to a page, all its children are also accessible to the page visitors.
  • Navigation transformations
    You can opt to apply transformations on all the Navigation widgets on your page or just to Navigation widgets that have a specific CSS class applied. You can also hide the navigation altogether.

Back To Top

Next: Create responsive design rules