In Webflow, adjusting the column and gutter widths of the guide overlay can be done using the Designer's canvas settings. Here's how you can do it:
1. Open your Webflow project in the Designer.
2. Click on the settings gear icon located at the top-right corner of the Designer panel.
3. In the settings panel, under the "Canvas" tab, you'll find options for adjusting the column and gutter widths.
4. For adjusting the column width, you can choose between "Fixed" and "Auto" options.
- "Fixed" allows you to set a specific pixel value for the column width.
- "Auto" adjusts the column width automatically based on the content within it.
5. To adjust the gutter width, you can choose between a percentage or pixel value.
- Percentage sets the gutter width as a percentage of the total container width.
- Pixels allows you to define a specific pixel value for the gutter width.
Keep in mind that changing the column and gutter widths using the guide overlay does not affect the actual layout of your elements on the canvas. The guide overlay simply provides a visual reference to assist when designing your layout.
Additionally, if you are using a grid system or flexbox in your project, you may need to adjust the column and gutter widths within those specific settings as well. These settings can typically be found in the layout settings for the respective elements or containers using grid or flexbox.