Webflow sync, pageviews & more.
NEW

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 and give it a unique class name.
  • Click into it, select an H4, and use the nested selector shown in the Style panel.
  • Switch to the mobile breakpoint, then adjust the font size in the Typography section for that nested selector.

To change the font size of H4 elements within a Rich Text element on mobile only, you’ll need to use Webflow’s Style Panel with rich text nested selectors and responsive breakpoints.

1. Select the Rich Text Element

  • Click the Rich Text element on your canvas.
  • Make sure it has a unique class name. For example, "Blog Content".

2. Access the Nested H4 Tag

  • With the Rich Text element selected, click into it and select an H4 heading within it.
  • In the Selector field at the top of the Style panel, Webflow will show something like “H4 inside Blog Content”.
  • This creates a nested selector, targeting only H4 elements inside that specific Rich Text block.

3. Switch to the Mobile Breakpoint

  • In the top of Webflow’s Designer, click the mobile landscape icon (for tablet and smaller) or mobile portrait icon (for mobile only).
  • This enables styling specifically for that screen size and smaller.

4. Adjust the Font Size

  • With the nested H4 inside Rich Text selector active, and the mobile breakpoint selected:
  • Scroll down in the Style panel to Typography.
  • Change the font size to your desired mobile-friendly size (e.g., 16px).

5. Repeat if Needed for Other Mobile Breakpoints

  • You can fine-tune further by switching to tablet or landscape mobile and adjusting font size separately if needed.

Summary

To change the H4 font size in a Rich Text element on mobile: create a nested selector, switch to the mobile breakpoint, and then adjust the font size under Typography. This ensures only H4 elements within that Rich Text class are affected, and only on mobile.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are some tips for reducing the file size of a JSON file, specifically for 3D models, like the ones on the Apple website, that were created in Cinema 4D, rendered as a sequence of PNG files, and exported using Bodymovin in After Effects?
How can I exclude specific pages in Webflow from appearing in our sitemap and analytics, such as auto-generated certificates given to visitors who completed a basic training on our website?
Is it possible to assign images to each column in a master spreadsheet on my existing website using Webflow without the need for third-party hosting like Google Drive?
How can I create a smooth scroll Back to Top Button in Webflow for long pages or for when I want to add a modern feature that only appears once the visitor has scrolled down a bit? Can you provide an example?
Is it possible to embed a .mp4 video from Google Drive to a website using Webflow without using YouTube, Vimeo, or similar hosting sites? If yes, what are the specific steps for doing so?
What could be causing the issue with my accordion tab not disappearing and reappearing on click in Webflow?
How can I create a scrolling div inside a fixed div in Webflow?
How can I implement horizontal scroll when scrolling over a div in Webflow?
Who can I contact for customer support after purchasing a Webflow template and encountering difficulties with customizing the intro page designed by a third party?
What is the recommended approach for integrating a store pickup solution with Webflow for a restaurant business, if I previously used Zapiet on Shopify?
How to adjust line height in Webflow's new UI? Need help with fixing bunched-up heading text.
How can I connect an external API to Webflow to retrieve data and utilize it in my Webflow project? Is it possible to call APIs through buttons in Webflow? I suspect that implementing custom JavaScript in the header or footer scripts may be necessary, but I'm curious if anyone has experience with this. Thank you!
Why are the items after the load more button appearing twice when combining the finsweet attributes 'CMS filter' and 'CMS Load' in Webflow?
Is there someone who can resolve the issue with my student discount not applying using my school-provided .com email address that is linked to my Webflow account?
How can I add an onClick event to a Webflow button in order to trigger a Calendly embed popup, following the instructions provided by Calendly? I've tried the method mentioned in a thread but it's not working. Please assist.
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
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 prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?