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

TL;DR
  • Select the Rich Text element, switch to the mobile breakpoint, and assign a class if needed.  
  • In the Style panel, select the nested H4 selector and adjust its font size to apply changes only for mobile views.

To change the font size of H4 elements within a Rich Text element on Webflow only for mobile screen sizes, use Webflow’s style panel combined with responsive breakpoints.

​

1. Select the Rich Text Element

​

  • Click on the Rich Text element on your canvas.
  • If your H4s are inside a Rich Text block, Webflow treats them as nested tag styles.

​

2. Switch to the Mobile Breakpoint

​

  • In the top bar of the Designer, click the Mobile Portrait icon (the smallest breakpoint).
  • This enables you to apply styles that only affect that screen size and below (unless overridden).

​

3. Target the H4 Inside the Rich Text

​

  • In the Style panel (right sidebar), go to the "Selector field".
  • Click it and choose "All H4 Headings inside of [Rich Text class]".
  • If the Rich Text element has no class, assign one (e.g., rich-text), then repeat this step.

​

4. Adjust the Font Size

​

  • With the H4 inside your Rich Text block selected, set your desired font size under Typography in the Style panel.
  • This change only applies to mobile portrait and smaller views (unless overridden later).

​

5. Preview and Test

​

  • Use the preview mode and change screen sizes to ensure your change appears correctly just on mobile.

​

Summary

​

To change H4 font size in a Rich Text element for mobile, select the mobile breakpoint, choose the nested selector for H4 inside your Rich Text class, and adjust the font size. This targets only mobile screen sizes without affecting desktop or tablet views.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create additional sections with different background colors using Webflow, without altering the original sections?
How can I create a Webflow Buy Now button that bypasses the cart and takes the user directly to the checkout for a better UX for merchants with small inventories or binary product choices?
How can I reduce unused JavaScript on Webflow to improve my website's page speed?
What is the best way to transfer the design of my static pages from Bubble to Webflow without using the Webflow Plugin?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I fix the issue of the scrollbar line not being displayed on iOS devices for the horizontal scroll gallery on my Webflow site?
How can I optimize my Webflow website for the upcoming Google Core Web Vitals update, specifically for issues related to proper image sizing and eliminating render-blocking resources?
What is the proper way to use combo classes in Webflow to apply multiple modifiers without repeating styles, especially when dealing with classes like "button big primary"?
How can I change the font color of every even item in a Webflow collection list?
Why is my favicon not showing up in Webflow, even though I re-uploaded it and it displays correctly in project settings?
Is it possible to integrate a booking app on a website that connects with a Google Calendar to show available time slots and allows the client to approve appointments before adding them to the calendar? What are the preferred web apps or tools to achieve this with Webflow?
How can an image's position be moved in Webflow?
How can I achieve the preview effect for a website like in the "Discover" section within Webflow using an iframe? Can this be done with any site? Thank you.
Have you experienced compatibility issues with Webflow on Safari where a significant portion of your site disappears while it appears fine on Chrome, Firefox, and Edge?
How can I link a team member's name in a list on a Webflow team page to reveal more information about them, all served from the CMS?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?