"We are revamping our Knowledge Base articles to serve you better. In case you find something unusual, do not panic. Reach out to our Support Team by submitting a ticket if you ever need some help.”
  1. Home
  2. Resize Or Reset Column Width

Resize Or Reset Column Width

Resize Or Reset Column Width

You can resize column width using one of several methods. You can reset column width to the defaults. Finally, you can vary column width according to device, which also prevents column stacking.

Resize column width

The method to resize column width largely depends on how many columns are in the column group.

Resize column width in a single-column group

When a column group contains just one column, by default the width is 100%. There are two methods you can use to reduce the width of a single column.

  • Set the column width to less than 100%.
    Open the column settings and change the Width setting on the Style tab.
    Note: The column stays left-aligned and the width of the column is shortened, as shown in this screenshot. You can't change the horizontal alignment with this method.
    A single column with 50% width
  • Place an empty column on each side of the single column, then set column widths to position the center column horizontally. Use the column drag handles to set the column widths you want.

Resize column width in multicolumn groups

There are two methods to resize column width. With both methods, resizing one column width resizes the other column widths in the same column group to maintain a total of 100%. The new setting applies to all device sizes unless you change the width separately for medium and small devices.

For example, by default two columns in a column group are sized at 50% width each. If you resize one column width to 60%, the other column automatically resizes to 40%.

Method 1: Drag the column handle

This method is quick and easy.

  • In your layout, mouse over a module and drag a column handle, shown here:

Tip: If have two modules in a single column, you can drag the handles on either module.

Method 2: Use Column Settings

This method may not work well for changing the widths of more than two columns because every time you change one width, the others resize automatically to total 100%.

  1. Open a column for editing.
  2. On the Style tab, change the percentage in Column width.

Reset column widths

With this procedure you can reset column widths to evenly divided widths for the entire column group.

To reset the column widths for the entire column group:

  • Mouse over a module to display its toolbar, then click Edit Column > Reset column widths.
    If the options display a hamburger icon, click that, then mouse over Edit column to reveal the settings.

Note: If you have custom widths set for medium and small devices on the Advanced tab, you must change those manually.

Was this article helpful?

DF Black Trimmed

ANNOUNCEMENT:
Our Knowledge Base articles are undergoing a comprehensive overhaul to enhance your experience.

If you encounter any unexpected issues or irregularities, feel free to connect with our Support Team by submitting a support ticket for prompt assistance.
Join our Slack Workspace

Join the DropFunnels Slack Workspace and get access to the DropFunnels team, other DropFunnels members, twice-weekly support calls and more!

Join our Slack Workspace

Become A DropFunnels Wizard


Complete our Fast Start Training and learn everything you need to know to launch your first or next funnel.

From Lead Capture to Products, Courses to Blogs, this easy-to-follow training covers it all.

We’ll even give you $50 credit for completing the training!


Become A DropFunnels Wizard