<commit_before>---
title: Using Media Queries
taxonomy:
    category: docs
    tag: [gantry5]
---

Media queries make it possible to apply CSS only to a specific screen type. For example, if you have an element on your page that you would like to appear differently on phones than it does on a desktop.

Gantry 5 makes easy to do, and this guide will take you through the process of defining breakpoints, as well as adding media queries to your `custom.scss` file.

## Defining Breakpoints

Because Gantry 5 gives you the ability to easily define the breakpoints between viewport types, you can create a user experience that is optimized for a wide range of device types with ease.

![Breakpoints](breakpoints.png?classes=shadow,border)

[ui-tabs position="top-left" active="0"]
[ui-tab title="Joomla"]

Gantry 5 templates include four key breakpoints that are defined by `rem` units. You can set the breakpoints in the **Styles** administrative panel within the Gantry 5 administrator. To access this panel, navigate to **Administrator → Components → Gantry 5 Themes → Your Theme** and select the **Styles** tab. Because this tab is Outline specific, you can change these settings on a per-outline basis.

[/ui-tab]
[ui-tab title="WordPress"]

Gantry 5 templates include four key breakpoints that are defined by `rem` units. You can set the breakpoints in the **Styles** administrative panel within the Gantry 5 administrator. To access this panel, navigate to **Administrator → Theme Settings** and select the **Styles** tab. Because this tab is Outline specific, you can change these settings on a per-outline basis.

[/ui-tab]
[ui-tab title="Grav"]

Gantry 5 templates include four key breakpoints that are defined by `rem` units. You can set the breakpoints in the **Styles** administrative panel within the Gantry 5 administrator. To access this panel, navigate to **Administrator → Gantry 5** and select the **Styles** tab. Because this tab is Outline specific, you can change these settings on a per-outline basis.

[/ui-tab]
[/ui-tabs]

If you're not familiar with `rem` units. There is an excellent explainer below produced by [<NAME> for SitePoint](http://www.sitepoint.com/css3-rem-units/). Additionally, you can read a [detailed guide from W3](http://www.w3.org/TR/2013/CR-css3-values-20130730/#font-relative-lengths).

[plugin:youtube](https://www.youtube.com/watch?v=XbU-i1SE5JY)

## Using Media Queries on Your Site

Using your own media queries can be done very easily within your `custom.scss` file. You can find out more about creating this file and how it works in our [detailed guide](../adding-a-custom-style-sheet).
<commit_msg>Updated outdated link for rem explanation<commit_after>---
title: Using Media Queries
taxonomy:
    category: docs
    tag: [gantry5]
---

Media queries make it possible to apply CSS only to a specific screen type. For example, if you have an element on your page that you would like to appear differently on phones than it does on a desktop.

Gantry 5 makes easy to do, and this guide will take you through the process of defining breakpoints, as well as adding media queries to your `custom.scss` file.

## Defining Breakpoints

Because Gantry 5 gives you the ability to easily define the breakpoints between viewport types, you can create a user experience that is optimized for a wide range of device types with ease.

![Breakpoints](breakpoints.png?classes=shadow,border)

[ui-tabs position="top-left" active="0"]
[ui-tab title="Joomla"]

Gantry 5 templates include four key breakpoints that are defined by `rem` units. You can set the breakpoints in the **Styles** administrative panel within the Gantry 5 administrator. To access this panel, navigate to **Administrator → Components → Gantry 5 Themes → Your Theme** and select the **Styles** tab. Because this tab is Outline specific, you can change these settings on a per-outline basis.

[/ui-tab]
[ui-tab title="WordPress"]

Gantry 5 templates include four key breakpoints that are defined by `rem` units. You can set the breakpoints in the **Styles** administrative panel within the Gantry 5 administrator. To access this panel, navigate to **Administrator → Theme Settings** and select the **Styles** tab. Because this tab is Outline specific, you can change these settings on a per-outline basis.

[/ui-tab]
[ui-tab title="Grav"]

Gantry 5 templates include four key breakpoints that are defined by `rem` units. You can set the breakpoints in the **Styles** administrative panel within the Gantry 5 administrator. To access this panel, navigate to **Administrator → Gantry 5** and select the **Styles** tab. Because this tab is Outline specific, you can change these settings on a per-outline basis.

[/ui-tab]
[/ui-tabs]

If you're not familiar with `rem` units. There is an excellent explainer below produced by [<NAME> for SitePoint](http://www.sitepoint.com/css3-rem-units/). Additionally, you can read a [detailed guide from W3](https://www.w3.org/TR/css-values-3/#font-relative-lengths).

[plugin:youtube](https://www.youtube.com/watch?v=XbU-i1SE5JY)

## Using Media Queries on Your Site

Using your own media queries can be done very easily within your `custom.scss` file. You can find out more about creating this file and how it works in our [detailed guide](../adding-a-custom-style-sheet).

{'fraction_non_alphanumeric': 0.08316086547507055, 'fraction_numerical': 0.0090310442144873, 'mean_word_length': 4.5375, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 3, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4260024', 'n_tokens_mistral': 1460, 'n_tokens_neox': 1414, 'n_words': 747}