# Media Query

**Default Value: On**

<div align="left"><figure><img src="https://1321172380-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6URweRGNKNYKXJxvg9E6%2Fuploads%2FR3duyzIpEA2cDP2wXp1W%2Fpopup-media-query.webp?alt=media&#x26;token=57e5b4a4-ef5b-4612-8325-a225125b5102" alt="" width="319"><figcaption></figcaption></figure></div>

## Media Query On

This option will add Media Query to the copied code for responsive design.

It works with all Component Format and Style Format options.

#### Media Query with Tailwind CSS

If you choose Tailwind CSS, Media Query will be added to the Tailwind CSS classes. If there is a Media Query style that is not supported by Tailwind CSS, it will be added as a global style.

#### Media Query with Inline CSS

If you choose Inline CSS, Media Query will be added as a global style because Inline CSS doesn't support Media Query styles.

#### Media Query with External CSS

If you choose External CSS, Media Query will be added to the External CSS.

#### Media Query with Local CSS

If you choose Local CSS, Media Query will be added to the Local CSS.

### Media Query Off

This option will not add Media Query to the copied code.