• Sitefinity Tips

Responsive Design with Sitefinity Layout Controls

Share

There is a lot you can do with layout controls in Sitefinity and here we're going to look at how you can adjust the behaviour of your page for different screen sizes.

If you need an introduction to layout controls, check this blog post first.

Responsive Design Adjustments

Specifying Which Responsive Rules Apply To A  Page

Most of the time you do not need to worry about this, but there may be a rare case where you want to completely turn off responsive rules for a page. If you did this then even on a mobile device the regular desktop version of the page would appear.

As soon as you enter the list of layout controls look to the bottom for the Responsive Layout Settings button

Settings button highlighted

From here you can choose which responsive rules apply to the page (or not).
Choose the options on this screen to select which rules apply (or not).

Hide or Show Specific Columns for Various Screen Sizes

You can get more granular with hiding and showing content at certain screen sizes by editing a specific layout control on your page.

To start, click the Edit link on a layout control on your page.
The edit button on a layout control will allow the properties to be modified

At the bottom of the layout properties on the right side of the screen there is now a heading for Responsive design. Click the Change button there to open up additional options for responsive screen sizes.

Clicking the change button on the responsive design properties gives more otions

From the new window you can select if a column show appear or be hidden at certain screen sizes

Note: Hiding a column at a desktop screen size will make that column disappear from the screen you're working on. To show that column again, simply reduce the width of your browser window. When your window size matches a mobile phone for example, the hidden column will appear again.

 

This screen has options to show or hide columns at different screen sizes

 

Back to Top Arrow Up