> For the complete documentation index, see [llms.txt](https://docs.wpblockslider.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wpblockslider.com/guides/using-a-responsive-control.md).

# Using a responsive control

Responsive design is a crucial thing for web development. Responsive design ensures that your site looks good on all devices (slider in our case) with different screen sizes and resolutions. This can be a painful process to do manually, but block slider offers responsive support for a variety of its slider options, so you are able to make your site look perfect on any device.

### How to use it?

Let’s suppose you’ve created this carousel (see below)

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

It may look good initially, but it’s missing the most important part. You’ve guessed it right ????, It’s missing responsive. Here’s how it looks currently on different devices:

{% embed url="<https://share.getcloudapp.com/KouEbn16?collection_id=nlfk6Dv>" %}

Now that we’ve understood the issue, Let’s take a look at how this can be fixed. We can easily adjust responsive supported controls by switching to the desired device preview (via native Gutenberg).

{% embed url="<https://share.getcloudapp.com/geuPNOPv?collection_id=nlfk6Dv>" %}

## How to know if a control supports responsiveness?

Not all block slider controls support responsiveness, The unsupported responsive controls will have a light opacity (when you are in tablet or mobile view), indicating that it’s currently disabled/unsupported.

{% embed url="<https://share.getcloudapp.com/Z4uGXmNK?collection_id=nlfk6Dv>" %}

## **Quick tip**

You can find an active responsive indication in the top toolbar.

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