Adjust responsive page elements

If we add an item in a specific element, mostly a couple of things are available right under the description of the element.

responsive page elements 1

Standard width block (?/12)

The idea is that the width of content equals a value of 12. In an ideal world, this width is fully being used by the number of elements you want to visualize on one row. The sum of all items, standing on one row, equals 12.

In the screenshot above the widht is being set at 6. This means that the item will fill the left half of the page.

  • One item => width 12
  • Two items=> width 6 (2 times)
  • Three items => width 4 (3 times)
  • Four items => width 3 (4 times)
  • Six items => width 2 (6 times)
  • Twelve items => width 1 (12 times)

Of course this is only a guideline, this values don't have to be set in the exact same way.


Used for making one specific item temporarily invisible/visible.


The spacing between items can be made larger or smaller by using ofsett.

Gear icon

Gear icons or the advanced options are being used to adjust the settings for other devices (desktop, tablet or mobile).

responsive page elements 2

Finally the settings can also be adjusted in the visual interface. The black arrows are being used to adjust the ofsett, the blue and green arrow to make the width value increase/decrease by one.

responsive page elements 3