---
title: "How to Change Text Size Based on Width"
---

# How to Change Text Size Based on Width

> Since media queries react to viewport changes, we can use them to change the text size of a style class. Imagine a scenario where text needed to be larger on a smaller display, such as phone, to improve readability. That same text could likely be smaller on a desktop.

In this example, we will configure a media query that will change the text size for the Style Class when the screen is smaller.

1. Create a new Style Class. We called ours **MediaQuery**.
1. Under Style Rules, click on the **Add** ![](how-to-change-text-size-based-on-width/add-icon.png) icon and select **Media Query**.

    ![](how-to-change-text-size-based-on-width/1-2020-06-29_16-46-03.png)

1. With the Media Query selected, change Media Query to **max-width** and the pixel value to **500px**. We also set the Text Font size to **24px**.
1. Click **OK** to save the Style Class.

    ![](how-to-change-text-size-based-on-width/2-2020-06-29_16-49-23.png)

1. Create a new component that contains text, or select an existing component within a container. In this example, we created a new Label component and placed it on a view.
1. Assign the **MediaQuery** Style Class we just created to the Label component using the props.style.classes dropdown to browse Styles.

    ![](how-to-change-text-size-based-on-width/3-28-05-21-12-30-17.png)

1. **Save** the project.
1. Launch a Perspective Session, and navigate to view containing the label (you may have create a page for the view). You will see the font size on the label change as you adjust the size of your session window.

    ![](how-to-change-text-size-based-on-width/4-WMge6uSi3i.gif)