Tips and things to have in mind

There are several things you need to keep in mind when using applying responsive design to your site:

• Since mobile devices’ screens vary in width and height, we recommend that you do not use hardcoded widths and heights in your CSS file because resizing on mobile device screens will not be possible. For example, hardcoded width and height might result in scrollbars and poor screen optimizations.
• We recommend that you set the width to 100% or auto (depending on the specific scenario).
• Layout transformations apply to Sitefinity CMS built-in layout widgets or custom widgets, based on the built-in ones only. For more information, see Custom layout widgets.
• The layout transformations CSS is loaded on a page only if the following conditions are fulfilled:
  • Responsive & Mobile Design module is enabled and you have at least 1 active rule
  • A rule is applied to the page/template
  • You have at least one layout widget on the page

The above features work automatically with the built-in layout and navigation widgets. In most cases, you need to write and apply additional CSS to make your custom designs responsive. Usually, you need to write additional CSS that:

• Sets the width of the page wrapper in %
• Transforms linearly any columns which are not made with Sitefinity CMS built-in layout widget (main content and sidebar might need to go one under one another), adjust horizontal margins and paddings of the columns (might need to set them to zero)
• Increases font sizes for better readability
• Applies background images suitable for mobile devices with smaller sizes to save bandwidth and to better fit the design
• Makes buttons bigger so it is easier to be clicked
• Set max-width to 100% for images so they fit in mobile devices screens