responsive columns width

Using Page Builder CK you can create your own columns, give them the width you want. But you can also manage the columns width exactly as you want in responsive mode.

For each resolution, you can setup your columns width and give them custom values. In the same row you can choose to have your columns like this : 25/75 + 70/30 dispatched on 2 lines. There is no limit !

1. Setup your columns width in desktop

In your page you can click on the row edition >> columns icon to switch to the columns width edition mode.
desktop columns
Then you will get the left panel with the edition options. You can choose to display your columns automatically aligned, using a gutter value ... There are many possible configurations.
desktop columns edition
 

2. Enable the responsive edition

2.1 Default responsive options

You can do the same as for desktop, but for every resolution in mobile mode. Click on the big phone icon in the left panel to enable the mobile mode.

mobile mode

In this interface you can

2.2 Responsive widths

Now if you want to do more and edit the width of each column, for each resolution, you can click on the Responsive width edition button

responsive wdith edition

You will get the width option on each column. You can fill your own values here. Switch to another resolution (tablet, phone, ...) and update the values for each one.

If you give more than 100% to your columns, they will go on a new line (but they will stay in the same HTML row !). Just play with it and you will quickly understand how it works.

Note that once you have decided to stack your columns vertically, the responsive width option disappears. This is because in this case, when stacked, they are 100% of the parent, each one on one line.

2.3 Custom gutter

There is no gutter option in the responsive width edition, all columns will take the available space. You can create a gutter by giving some values lower than 100%.

Example : 1 column of 39% + 1 column of 59% = a gutter of 2%

example gutter 2 pourcent

3. Demo of all resolutions

3.1 Desktop

 

demo desktop

3.2. Tablet landscape

demo tablet landscape

3.3. Tablet portrait

demo tablet portrait

3.4. Phone

demo phone