How to Change Column Widths in Wix

by

Wix is a popular website builder that allows you to create professional-looking websites without coding. One of the key features of Wix is its drag-and-drop editor, which allows you to easily add and customize columns on your pages.

However, you may sometimes want to adjust the width of your columns after initially setting them up. Changing column widths in Wix is easy to do right within the editor. In this comprehensive guide, we’ll cover everything you need to know about resizing columns in Wix.

How to Change Column Widths in Wix
How to Change Column Widths in Wix

Overview of Columns in Wix

Before jumping into how to change column widths, let’s first go over some basics about how columns work in Wix.

  • Wix uses a grid-based layout system. This means your pages are divided into rows and columns.
  • You can add columns by dragging elements like text boxes, images, etc. into place on the page.
  • Columns will automatically resize to fit the content you add to them.
  • You can customize the number of columns (up to 12) and their widths.
  • Common column width layouts are 50/50, 66/33, 75/25, etc. But you can set any custom widths.
  • Columns are responsive by default, so they’ll stack vertically on mobile devices.
  • There are a few different ways to change column widths, covered next.

So in summary, columns provide an easy way to layout your content in a professional way, and Wix gives you the flexibility to customize them to your needs.

How to Change Column Widths in Wix

Now let’s get into the various methods you can use to change your column widths in Wix.

1. Adjust Column Widths Visually

The easiest way to resize columns is directly on the page using a visual drag-and-drop approach. Here’s how:

  1. Go to the page where you want to change column widths.
  2. Make sure you are in Edit mode.
  3. Hover over the vertical line between two columns. Your cursor will change to the resize icon.
  4. Click and drag the column divider left or right to adjust the column widths.
  5. Optionally, click “Distribute Space Evenly” in the toolbar to make all columns equal width again.
  6. When done adjusting, click Save in the toolbar.

This allows you to quickly tweak column widths by eye. However, if you need more precise control, keep reading.

2. Use the Resize Tool

The Wix editor has a Resize tool that allows you to set exact column widths. To use it:

  1. Enter Edit mode and select the section or column you want to resize.
  2. In the toolbar, click the Resize icon (it looks like a square with arrows).
  3. In the Resize window that appears, enter the desired width (in pixels) or percentage for the column.
  4. Select if you want the change applied just to that column or all columns.
  5. Click Apply to save the new widths.

The Resize tool is great when you need to match a specific pixel width or percentage.

3. Adjust Column Proportions by Percentage

You can also change column widths by adjusting their proportions as a percentage:

  1. Make sure you are editing the page and have the section selected.
  2. Click the Settings icon (gear symbol) in the toolbar.
  3. Go to the Layout tab.
  4. Under Columns, adjust the percentages to reallocate the widths.
  5. The total must add up to 100%. Click Apply when done.

Setting percentages gives you an easy way to divide space, like having two 50% width columns or a 75/25 split.

4. Set Column Widths in Design Mode

When designing a new page in Wix, you can set column widths right from the start:

  1. When adding a new page, go to Design mode.
  2. Click Add Section and select the number of columns you want.
  3. Adjust the column slider below the editor to set the widths.
  4. You can select column widths that are already proportioned, or create a custom layout.
  5. When done, click Apply then add your content to the new columns.

Starting this way ensures your columns are sized how you want from the beginning.

5. Use HTML to Adjust Column Widths

For full control over column widths, you can edit the HTML on the page:

  1. Enable the HTML editor in Wix by going to Editor > Advanced > Edit HTML.
  2. Find the <div> tags for the columns you want to adjust.
  3. Add or edit the width attribute with a pixel width or percentage.
  4. Click Update in the HTML editor to save your changes.

While coding column widths requires more technical skills, it does provide the most flexibility.

6. Adjust Widths Through Media Queries

To change column widths for certain devices or screen sizes, use media queries in the HTML:

@media (max-width: 600px) {
  .column {
    width: 100%;
  }
}

This will make the column stack vertically when the screen is less than 600px wide.

Media queries allow you to optimize responsive layouts. But they do require coding knowledge.

Tips for Changing Column Widths

When adjusting column widths in Wix, keep these tips in mind:

  • Make smaller tweaks first to avoid dramatic layout shifts.
  • Try to maintain consistent spacing between columns.
  • Watch how content reflows and make sure text doesn’t get cut off.
  • Test on mobile to ensure the responsive behavior is still good.
  • For text-heavy sites, limit very wide columns to improve readability.
  • When in doubt, align column widths to the grid for clean ratios.
  • Changing the width of a section will proportionally resize all its columns.
  • You can set min and max widths in HTML/CSS for more responsive control.
  • Combining different methods gives you the most flexibility.

Common Column Width Layouts

Here are some commonly used column width layouts that work well in Wix:

50/50

This splits the content area evenly into two columns:

Column 1 = 50% width  
Column 2 = 50% width

The two-column 50/50 layout is simple but effective for balancing content.

66/33

Similar to 50/50 but with a larger main column:

Primary column = 66% width
Secondary column = 33% width

Having a wider main column with a sidebar works well for blogs and articles.

75/25

Taking the 66/33 split even further:

Primary column = 75% width  
Secondary column = 25% width

This gives you a prominent content area with an accent column.

Thirds

Splitting the space into three equal columns:

Column 1 = 33.3% width
Column 2 = 33.3% width  
Column 3 = 33.3% width

Three columns can add more visual interest while still being easy to scan.

Troubleshooting Column Widths

Here are some common issues you may encounter when working with column widths in Wix:

Problem: Columns appear uneven or ragged.

Solution: Only use percentages divisible by 5 when setting widths (like 25/75). Avoid widths like 30/70.

Problem: There is extra space between columns.

Solution: Make sure columns combined add up to 100%. Check for margins/padding in the HTML causing gaps.

Problem: Columns overlap each other.

Solution: Columns may be positioned absolutely. Switch them to relative or static position.

Problem: Columns don’t resize on mobile.

Solution: Make sure responsive behavior is enabled. Check for CSS overriding media queries.

Problem: Columns readjust but content overlaps.

Solution: The content may need reorganizing for mobile. Consider hiding less important elements.

FAQs about Wix Column Widths

Here are answers to some frequently asked questions about working with column widths in Wix:

How do I set all columns to be equal in width?

Click the “Distribute Space Evening” icon in the toolbar. Or set them each to a percentage divisible by the number of columns, like three 33.3% columns.

What’s the maximum number of columns I can add?

Wix supports up to 12 columns on a page. But it’s best to keep it to 3-4 columns maximum for easy reading.

Can I set a column to not stack on mobile?

Yes, in the HTML you can add width: 400px !important; for example to force it to stay fixed width.

Why are my columns not lining up well?

Only use percentages divisible by 5 for clean alignments. Avoid gaps by making sure columns’ combined width equals 100%.

How do I remove empty vertical space between columns?

In the HTML, reduce or remove any top/bottom margins or padding that may be causing extra space.

What is the default column gutter size?

The space between columns is around 30px. You can remove this by setting the column’s padding to 0px.

Conclusion

Adjusting column widths is a key part of customizing page layouts in Wix. Whether you want two even columns or a primary content area next to a sidebar, manipulating column sizes gives you precision and control over the user experience.

The Wix editor makes it easy to tweak widths visually, by percentages, or with exact pixels. More advanced options like HTML and media queries offer unlimited possibilities for responsive fine-tuning.

As you experiment with different column configurations, keep your content and audience needs in mind. Measure readability, spacing, and how layouts adapt on mobile. Finding the perfect column widths may require some trial and error, but the effort pays off with a polished, professional site.

Leave a Comment