> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Side-by-side layouts

> Split a row into columns and put text, pictures and compact sections side by side.

A Layout splits one row of your page into columns, so things can sit side by side. Put text beside a photo, 2 short lists next to each other, or a FAQ beside your prices. On phones the columns stack, one under another.

 **Who can do this:** anyone who can edit the page. Contributors' changes wait for an Editor to publish them.

![A Layout on Parker's page as visitors see it: a wide Rich Text column ("Why families choose us") beside a narrow Stats column ("By the numbers").](https://mintcdn.com/fetchski-attract-api/XGXm295htfOP45LA/images/cms/guides/build-pages/side-by-side-layouts/guides-build-pages-layouts-overview-light.png?fit=max\&auto=format\&n=XGXm295htfOP45LA\&q=85\&s=3829ae2b2307cf958154ebe08bc1e378)

A Layout puts text and numbers side by side.

## Before you start

* Open the page on your site and choose **Edit** in the edit bar.
* A Layout has 2 modes, switched at the top of the Layout when you select it. **Edit Columns** changes the columns. **Edit Content** changes what's in them.

## Add a Layout

**1. Select a section next to where the columns should go, and choose the round + button above or below it**

**2. In the Add Content menu, open the Layout group and choose Layout**

The Layout appears across the page, lined up with the sections around it.

## Arrange the columns

**1. Switch to columns**

Select the Layout and choose **Edit Columns**. The grid behind the columns shows.

**2. Add a column**

Choose an empty spot in the grid to add a column there. In a Layout with no columns yet, choose **Add Column**.

**3. Resize a column**

Drag its left or right edge. Columns snap to the grid as you drag.

**4. Move a column**

Drag it by its move handle (**Move Column**) to a new place in the row.

**5. Remove a column**

Choose **Delete Column** (the trash can) on the column. Everything inside the column goes with it. Removed one by mistake? Choose undo (the curved arrow at the top left of the edit bar).

![The Layout in Edit Columns mode: the grid lines showing, 2 columns with their resize edges, the move handle and Delete Column on the right column.](https://mintcdn.com/fetchski-attract-api/DSJs5HmTF1-gpNT3/images/cms/guides/build-pages/side-by-side-layouts/guides-build-pages-layouts-edit-columns-light.png?fit=max\&auto=format\&n=DSJs5HmTF1-gpNT3\&q=85\&s=0b8b1436ddba30614669537ffe93b435)

Edit Columns: add, resize, move and remove columns.

A row fits up to 6 columns. When there's no room left, the empty spot shows **Too small to add column**: narrow another column first.

## Fill the columns

**1. Switch to content**

Select the Layout and choose **Edit Content**.

**2. Add something to a column**

Choose **Add Content** in the column and pick from its menu.

**3. Edit it**

Select it and edit it like any section. A column can hold more than one thing, stacked one under another.

![The Layout in Edit Content mode with the right column's Add Content menu open, showing the shorter column list (Rich Text, Image, Video, Intro / Trust, Stats / By the numbers, How it works / Steps, Pricing / Packages, FAQ, Device mocks).](https://mintcdn.com/fetchski-attract-api/DSJs5HmTF1-gpNT3/images/cms/guides/build-pages/side-by-side-layouts/guides-build-pages-layouts-edit-content-light.png?fit=max\&auto=format\&n=DSJs5HmTF1-gpNT3\&q=85\&s=b70a5b9dab4cfdcf60600ce640f9f79d)

Edit Content: each column has its own, shorter Add Content menu.

## What fits in a column

A column takes things that still read well at half or a third of the page:

* **Rich Text**, **Image** and **Video**
* **Intro / Trust**, **Stats / By the numbers** and **How it works / Steps**
* **Pricing / Packages**, **FAQ** and **Device mocks**

Wide sections stay full width, so they aren't offered in a column. These include **Hero**, **Feature Cards**, **Logos / Partners**, **Final CTA**, **Newsletter Subscription** and **SMS Subscription**. You also can't put a Layout inside a column.

For one picture beside text, a **Media + Text block** section is often quicker than a Layout.

## Column options

Each column has its own options. Select the column and choose its style button (the palette icon).

* **Visible on tablet** and **Visible on mobile**: turn one off to hide the column on that screen size. Visitors on a computer still see it.
* **Horizontal alignment** and **Vertical alignment**: where the column's content sits inside the column. The choices include **Left**, **Center**, **Right**, **Top**, **Middle** and **Bottom**, or stretch to fill.

## How columns fit smaller screens

You set the columns for computers. Smaller screens rearrange them for you:

* **Tablets** show 2 columns per row. If a row has an odd number, the last one goes full width.
* **Phones** show 1 column per row, in the order they sit on the page.

Check the result before you publish. See [Preview on phones and tablets](https://docs.fetchski-attract.com/guides/build-pages/preview-on-devices.md).

## What happens next

Your changes stay in the page's draft until someone publishes it with **Update**. Editors, Admins and Owners can publish. Contributors submit their changes for review. See [Drafts, publishing and scheduling](https://docs.fetchski-attract.com/guides/build-pages/publish-and-schedule.md).

## Good to know

* **A Layout has no section editor.** You change it right on the page. Move or remove the whole Layout from its side toolbar, like any section.
* **Spacing is automatic.** The gap between columns matches the gap between things stacked in one column.
* **You can use a Layout in blog posts too:** in a post's **Body** and in its **After content**, the space below the post's text. Press ⌘K (Ctrl+K on Windows), choose **Blog Posts** under **Manage**, open the post, and use its **Content** or **After Content** tab.
* **Custom CSS:** Admins and Owners can style a Layout with the **Custom CSS** button on its toolbar.

## Troubleshooting

> [accordion] The section I want isn't in the column's menu
>
> Only the sections listed in [What fits in a column](#what-fits-in-a-column) go in a column. Put wide sections above or below the Layout instead.

> [accordion] Edit Columns" is grayed out ("Disabled on small screens")
>
> Changing columns needs a wider window. Make your browser window wider, or use a computer.

> [accordion] A column is missing on my phone
>
> Its **Visible on mobile** option is off, so you can't select the column in the phone view. Go back to full size first: choose **Clear Breakpoint** (the × beside the device name in the edit bar). Then select the column, open its options and turn **Visible on mobile** back on. Choose the phone device button again to check it.

## Related

> [card] [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md)
>
> the Add Content menu and the side toolbar.

> [card] [Preview on phones and tablets](https://docs.fetchski-attract.com/guides/build-pages/preview-on-devices.md)
>
> check how columns stack.

> [card] [Rich Text](https://docs.fetchski-attract.com/guides/sections/rich-text.md)
>
> write text in a column.

> [card] [Media + Text block](https://docs.fetchski-attract.com/guides/sections/media-text.md)
>
> a picture beside text, without columns.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.