# Multiple columns

<figure><img src="/files/UtWWTg1gsyZyFUe5AS2r" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**

1. In the theme editor **(Customize)**, click **Add section**
2. Select **Multiple columns**
3. Make necessary changes
4. **Save** the settings.
   {% endhint %}

## Section settings

### Section header

Select the header layout (on the Left of the whole cards or the Top).

Give the section a heading, description, and a button. Leave any fields blank if you don't want to show them.

<figure><img src="/files/yoJ7DZ5beAqK03a6y56R" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/iyDdicLdWde9GnzJydNj" alt=""><figcaption></figcaption></figure>

You can also set the alignment of your section header's button.

{% tabs %}
{% tab title="Left" %}

<figure><img src="/files/kPdZzbzCzGb1ZYF8KiCW" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="/files/Sk01yMX4jK1YmJ5AkjI7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Card settings

* Cards' content alignment: Left/Center/Right;
* Show border&#x20;

<figure><img src="/files/hjorRzcNj3Q0gGIJL4m7" alt=""><figcaption><p>An example when the option 'Show border' is selected</p></figcaption></figure>

* Image width: Extra small/ Small/ Medium/ Large/ Extra large/ Full width;
* Image rounded: 0-100 px;
* Heading size: H2-H6;
* Description style: Body text/ Sub text;
* Image hover effect: None/ Scaling up.

<figure><img src="/files/d9CPIPCJjnKODlPbvcsC" alt=""><figcaption></figcaption></figure>

### Grid settings

Set the number of columns for desktop view (2-12 columns) and adjust the gap between the columns and rows.

<figure><img src="/files/4Yy3V7vwNBsvJkslwKxO" alt=""><figcaption></figcaption></figure>

### Slider settings

Enable the slider for the section if needed (the number of cards > the number of columns).

Show the navigation and/or pagination to navigate the columns.

<figure><img src="/files/R4l9xMcJfemHgabkwACD" alt=""><figcaption></figcaption></figure>

### Mobile settings

Set the number of columns on mobile view: Inherit/ 1 column/ 2 columns.&#x20;

You can also make the section swipeable.

Then, adjust the gap of the columns and rows on mobile (between 0-50px).

<figure><img src="/files/8FbPstgqydROcZ7Bdi3Z" alt=""><figcaption></figcaption></figure>

## Block settings

Link your card to your desired page. Visitors will be directed to your attached page when clicking on the image or the button.

<figure><img src="/files/xKZMbJxq11GgRGQpjcXK" alt=""><figcaption></figcaption></figure>

Select an image and insert its content (heading and description).

<figure><img src="/files/zppGJKhDdGae3dS8Y74s" alt=""><figcaption></figcaption></figure>

Give your button a label and select the button style.

<figure><img src="/files/0kdi7HvUTbx2H5mZaCsU" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/megamog-theme/theme-sections/multiple-columns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.