How can I change the font size of H4 elements in the Rich Text element on Webflow only for mobile screen sizes?

To change the font size of H4 elements in the Rich Text element specifically for mobile screen sizes in Webflow, you can use CSS media queries and add custom code to your Webflow project.

Here's a step-by-step guide to achieve this:

1. Access the Designer: Open your Webflow project and enter the Designer interface.

2. Select the Rich Text element: Find the Rich Text element where you want to change the font size of the H4 elements and select it.

3. Add a custom class: In the Elements panel on the right-hand side, click on the "Selector" field and add a custom class name for the Rich Text element. For example, you can name it "mobile-h4".

4. Navigate to the Custom Code section: Click on the "Custom Code" option located in the top-right corner of the Designer interface.

5. Add CSS media query: In the "Head" tab of the custom code section, add the following CSS code:

```css
@media (max-width: 767px) {
.mobile-h4 h4 {
font-size: [desired font size];
}
}
```

Explanation of the code:

The `@media (max-width: 767px)` CSS media query targets screen sizes with a maximum width of 767 pixels, which typically relates to mobile devices. Feel free to adjust this value depending on your specific needs.

`.mobile-h4 h4` is the CSS selector that targets H4 elements within the Rich Text element with the custom class "mobile-h4".

`[desired font size]` should be replaced with the desired font size value. For example, you can use "16px" or any other appropriate font size.

6. Publish the changes: Save the custom code changes, return to the Designer, and publish your site for the changes to take effect on the live version.

By following these steps, you'll be able to change the font size of H4 elements in the Rich Text element specifically for mobile screens using Webflow.