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

# How do I configure specific widget layouts based on display size?

> Show a different layout on phones, tablets and desktops, for example 2 x 2 on a phone and 4 x 4 on a desktop, with the Responsive tab of a Pro widget.

On a Pro widget, you can set a different layout for each display size. For example, your widget can show 2 x 2 posts on a phone and 4 x 4 posts on a desktop.

![A widget that shows 4 x 4 posts on a desktop, 3 x 3 on a laptop, 2 x 2 on a tablet and 1 x 1 on a phone](https://mintcdn.com/snapwidget/QJTE73Rcy1kqujES/images/widget-settings/layouts-by-screen-size/3.gif?s=a872a29a3e499117d97888af8339374c)

> [!NOTE]
>
> The Responsive tab is on Pro Grid, Board, Slideshow and Scrolling widgets. Pro widgets come with the Lite, Pro and Developer plans. Every paid plan starts with a 14-day free trial. See [Free and Pro widgets](/docs/getting-started/free-and-pro-widgets).

**1. Open your widget**

On your [dashboard](https://snapwidget.com/dashboard), click the widget. Or create a new Pro widget.

**2. Turn on Responsive**

On the **Basic** tab, set **Responsive** to **Yes**. The display sizes only work when **Responsive** is **Yes**.

**3. Add a layout for a display size**

Open the **Responsive** tab. In **Display Size**, select a size. Then set the layout for that size:

* **Grid** and **Board**: **Layout**, in columns X rows.
* **Slideshow**: **Thumbnail Size**.
* **Scrolling**: **Thumbnail Size**. Instagram widgets also have **Columns**.

Click the plus button to add the option. Repeat this for each size that you want to change. To remove an option, click the X next to it.

**4. Update the code on your website**

Click **Update & Get Widget** (or **Get Widget** for a new widget), then **Copy To Clipboard**. Replace the old code on your website with the new code.

## Display sizes

The widget picks the layout from the width of the visitor's browser window:

| Display Size | Window width |
| - | - |
| Extra Small (Smart Phones) | Less than 768 px |
| Small (iPads) | 768 to 991 px |
| Medium (Larger Tablets) | 992 to 1199 px |
| Large (Desktops) | 1200 px and wider |

For a size that has no option, the widget uses the layout from the **Basic** tab.


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