Set Custom Columns Widths for Mobile

Last Updated: May 11, 2018

Note: We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

Though we don't offer a way to set specific column widths for mobile (you can only enable or disable the default stacking order at the moment), you can use this little trick to modify the column width. Say you have a 4-column grid on desktop that you want to stack to 2 columns for mobile:

1. Under your Section Styles, assign a custom class to the section you want to have a custom column stacking order. Let's call it 'custom-grid.' 

2. Go to Customize > Advanced and select the Mobile option from the custom CSS editor dropdown.

3. Add this CSS code:

.custom-grid .column {
   width: 50% !important;
   max-width: 50% !important;
   flex-basis: 50% !important;

Your 4-column grid will now stack down to two columns for mobile only. You can then add this code into the Tablet and Tablet Wide CSS editors if you want this stacking behavior for other smaller device widths.

We assigned the custom class of 'custom-grid' so that this behavior ONLY affects any section with this class. Be sure to add this classname to any section you want to have this stacking behavior.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found