# Custom columns

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

Configure how many columns are displayed across different screen sizes. This setting allows you to control the layout responsiveness for mobile, tablet, laptop, desktop, and large screens.

## What is a breakpoint?

A **breakpoint** is a specific screen width where the website layout changes to adapt to different devices.

{% hint style="info" %}
For example:

* **md (≥768px)** means the layout settings will apply when the screen width is **768px or larger**.
* If the screen is smaller than 768px, a smaller breakpoint (such as mb) will apply instead.
  {% endhint %}

In short, breakpoints help control how your layout adjusts across different screen sizes.

| Breakpoint    | Maximum width (.container) |
| ------------- | -------------------------- |
| mb (≥576px)   | 540px                      |
| md (≥768px)   | 720px                      |
| lg (≥992px)   | 960px                      |
| xl (≥1200px)  | 1140px                     |
| xxl (≥1400px) | 1320px                     |

{% hint style="info" %}
**Container width** refers to the maximum width of the main content area inside the page.

For example, when the screen is **992px wide or larger (lg)**, the content area will have a maximum width of **960px**.
{% endhint %}

## How to set up custom columns

{% hint style="success" %}
In **advanced setting**, enter the number of columns for each screen size (breakpoint). Separate each value with a comma.

* Format: `breakpoint:number`
* Example: `mb:1,md:2,lg:3,xl:4,xxl:5`
  {% endhint %}

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

{% hint style="info" %}
For example, `mb:1,md:2,lg:3,xl:4,xxl:5` means the layout will display:

* Mobile (mb): 1 column
* Tablet (md): 2 columns
* Laptop (lg): 3 columns
* Desktop (xl): 4 columns
* Large screens (xxl): 5 columns
  {% endhint %}

{% hint style="warning" %}
Leave this field empty to use the theme’s default column settings.
{% endhint %}

## Supported sections for custom columns

{% hint style="success" %}
Custom columns is available in the following sections/blocks:

* [Product tabs](/pebble-theme/theme-sections/product-tabs.md)
* [Collection tabs](/pebble-theme/theme-sections/collection-tabs.md)
* [Featured collection](/pebble-theme/theme-sections/featured-collection.md)
* [Collection list](/pebble-theme/theme-sections/collection-list.md)
* [Layout](/pebble-theme/theme-blocks/layout.md#grid)
  {% endhint %}


---

# 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/pebble-theme/global-settings/custom-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.