# Custom columns

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fo4LyTT3pzzhNxKxCXNl2%2FFox-BG%20Light%20(2).jpg?alt=media&#x26;token=8ca0aaa2-fded-4f2d-b453-1018b3be89b5" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FF6dq6PQSdifCo3POLqz0%2FFox-BG%20Light.jpg?alt=media&#x26;token=260d704e-9a29-49d6-943d-4d019f5d9b8e" 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](https://docs.foxecom.com/pebble-theme/theme-sections/product-tabs "mention")
* [collection-tabs](https://docs.foxecom.com/pebble-theme/theme-sections/collection-tabs "mention")
* [featured-collection](https://docs.foxecom.com/pebble-theme/theme-sections/featured-collection "mention")
* [collection-list](https://docs.foxecom.com/pebble-theme/theme-sections/collection-list "mention")
* [#grid](https://docs.foxecom.com/pebble-theme/theme-blocks/layout#grid "mention")
  {% endhint %}