> ## 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.

# Can I use SnapWidget on a responsive website?

> Make your SnapWidget widget fit any screen width, and show a different layout on phones, tablets and desktops.

Yes. Turn on the **Responsive** setting, and your widget grows and shrinks with the width of your page.

Free Grid, Board and Slideshow widgets have this setting. Pro widgets have it on every layout except Popup.

**1. Open your widget**

Open the widget from your [dashboard](https://snapwidget.com/dashboard), or create a new widget.

**2. Turn on Responsive**

On the **Basic** tab, set **Responsive** to **Yes**. Click **Update Preview** to see the change.

**3. Copy the new code**

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

> [!NOTE]
>
> The responsive code is different from the normal code. It adds a script and sets the widget width to 100%. If you keep the old code on your website, the widget keeps its old fixed size.

## Show a different layout on phones

With a Pro Grid, Board, Slideshow or Scrolling widget, you can set a different layout for each screen size on the **Responsive** tab. For example, show 4 columns on desktops and 2 columns on phones. See [Layouts by screen size](/docs/widget-settings/layouts-by-screen-size).

With free widgets, you can do this with two widgets and some CSS:

1. Make one widget for desktops, for example with 4 columns, and one widget for phones, for example with 2 columns.
2. Add the code for both widgets to your page, each inside its own `div`.
3. Use a CSS media query to show one widget at a time.

```html theme={null}
<div class="snapwidget-desktop">
  <!-- Paste the code for your desktop widget here -->
</div>
<div class="snapwidget-phone">
  <!-- Paste the code for your phone widget here -->
</div>

<style>
  .snapwidget-phone { display: none; }
  @media (max-width: 600px) {
    .snapwidget-desktop { display: none; }
    .snapwidget-phone { display: block; }
  }
</style>
```


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