Responsive options

You can manage the way to show your elements (row, column, item) in 4 responsive resolutions that you can define in px.

1. Enable the responsive edition
2. Custom Responsive resolutions
3. Responsive layout settings
   1. Row settings – Aligned / Stacked / Hidden
   2. Column and item settings – Show / Hide
4. Responsive styles edition
   1. Desktop settings
   2. Desktop preview
   3. Mobile phone settings
   4. Mobile phone preview

Enable the responsive edition

To enable the responsive options, click on the Responsive settings button in the left panel.

It will show you the 4 available resolutions that you can use to manage your responsive layout. Note that you can change these values into the component options (see explanations below)

And it will automatically switch the workspace into a responsive preview according to the resolution that you have selected

Custom Responsive resolutions

For each resolution you can give a custom value in px. This value will be used for all pages on the website. Go in the admin menu >> Page Builder CK component and then click on the Options button.

Go in the Responsive tab, you will see the 4 resolutions where you can write your own values. All values are given in px.

For the option Type of range you can choose between 2 behavior :

• Between : this will make your setting apply only between 2 resolutions, example between 640px and 480px. All other resolutions will not be affected by the settings
• Reducing : this will apply to the resolution and all resolution under it. For example it will apply for max 640px, from 0 to 640px. This way, at 480px and 320px you will get the inheritance of it

Responsive layout settings

Row settings – Aligned / Stacked / Hidden

In responsive mode, for each resolution you can select how do you want to show the elements in the row.

• Aligned: they will be aligned horizontally (default behavior)
• Stacked: they will be aligned vertically
• Hidden: the whole row and all the elements inside will be hidden

Note that there is some relation between the resolutions, for example if you set the Tablet/portait to be stacked, all lower resolutions (phone) will also be stacked automatically.

In the same way, for example if you set the row to the aligned on mobile / landscapte, all higher resolutions (tablet) will automatically become aligned too.

Column and item settings – Show / Hide

For each column and item you can choose if you want it to be shown or hidden for the selected resolution. Just click on the show/hide button to choose.

Note that there is some relation between the resolutions, for example if you hide an element on Phone/landscape then it will be hidden for all lower resolutions (phone/portrait) automatically.

Responsive styles edition

Using the responsive edition your can style your items as you want for each resolution. For example you can imagine that scenario for the text block :

• on desktop : white color, text aligned left, font size 14px
• on mobile phone : text aligned center, font size 20px

There is no limit, you can use any styling option and change it in any resolution, it could be the color, background image, margins, anything !

You can do the same on the title, and also on the button.

Note that you can also use the Custom CSS option for each item, and for each resolution use a different custom css.

Desktop settings

White color, font size of 14px

Desktop preview

Mobile phone settings

Font size of 25px, text aligned center. We can also imagine changing the font color, the margins ...etc

Mobile phone preview