Prevent column stacking with custom widths
You can prevent column stacking as screen width decreases by setting column widths differently on each device size.
For example, here's a two-column layer in which the columns have equal widths of 50% on large devices, as shown in the top screenshot. For medium devices (tablets), shown in the middle screenshot, the width of the left column was set to 20% and the right column to 80%. For small (mobile) devices, shown bottom screenshot, the width of the left column was set to 35% and the right column to 50%. You can see that the narrower columns are left-aligned in their space.
Column widths set for medium and small devices can be set to be less than 100% for the columns in a layer.
Note: If you change the default breakpoints under global settings, it will affect the point at which the column width changes.
To change column width by device size:
- Open Column settings for the column.
- On the Style tab, set the percentage for large devices in the normal fashion. This will adjust the other columns in the layer and become the layout for large devices.
- Click the Advanced tab.
- In the Responsive layout section, for Medium device width or Small device width choose Custom, then enter a percent.
- Click Save.
- Repeat these steps for each column in the layer that you want to modify.