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

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?