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:

  1. Open Column settings for the column.
  2. 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.
  3. Click the Advanced tab.
  4. In the Responsive layout section, for Medium device width or Small device width choose Custom, then enter a percent. 
  5. Click Save.
  6. Repeat these steps for each column in the layer that you want to modify.