How To Bold Rich Text Heading On Mobile

Store Design
, , , , ,

Topic summary

A user wants to modify the font weight and size of rich text headings specifically for mobile devices. They provided a screenshot showing the desired changes.

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Insert custom CSS code before the closing </body> tag

CSS approach:
The solution uses a media query targeting screens with max-width of 767px (mobile devices). The code targets the rich text heading element (h2.rich-text__heading) and applies:

  • Font weight: 700 (bold)
  • Font size: 23px
  • Uses !important flags to ensure the styles override existing CSS

The responder marked this as an accepted solution and requested feedback on whether it resolved the issue.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Thanks in advance!

I am looking to change the font weight and size for my rich text heading only for mobile. Example shown below.

Screenshot 2024-06-27 153546.png
Screenshot 2024-06-27 153546.png198×157 2.68 KB

https://decemberschild.com/

password: dc

2

Hello @MMast

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ h2.rich-text__heading.rte.inline-richtext.h1.scroll-trigger.animate--slide-in { font-weight: 700 !important; font-size: 23px !important; /*adjust according to you*/ } }

techlyser_web_0-1719517712825.png
techlyser_web_0-1719517712825.png318×163 1.89 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like