How to make the moving text font size smaller?

Technical Q&A
, ,

Topic summary

A user seeks to reduce the font size of moving text on their website, particularly for mobile display where it appears too large.

Solutions Provided:

Multiple respondents offered CSS code snippets to address the issue:

  • Option 1: Add custom CSS targeting .rich-text elements with font-size: 15px for screens under 767px width
  • Option 2: Modify base.css file with .moving-text h2 { font-size: 15px !important; }
  • Option 3: Insert styling code in theme.liquid file before the </body> tag

All solutions involve accessing the Shopify theme code editor (Online Store → Theme → Edit Code).

Follow-up Issue:

After implementing a solution, the user reported inconsistent sizing: the second moving text banner now displays significantly smaller than the first on mobile. The discussion remains open as they seek guidance to make both banners uniform in size.

Images were shared showing the mobile display issues before and after the initial fix.

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

Hi,

I would like the moving text font to be smaller on my website as currently on mobile its quite big and want the moving text banner and font size smaller

https://www.theflowerstudiobyroo.co.uk/pages/workshop-events

umrraz90_1-1723025976991.png
umrraz90_1-1723025976991.png650×622 60.6 KB

umrraz90_0-1723025952134.png
umrraz90_0-1723025952134.png1306×146 40.1 KB

2

Hey @umrraz90

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723026282015.png
Moeed_0-1723026282015.png378×677 61.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hello @umrraz90

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) { .rich-text .rich-text__text.rte p { font-size: 15px !important; } .rich-text h2.rich-text__heading.rte.inline-richtext{ font-size: 22px !important; } }

niraj_patel_0-1723026814018.png
niraj_patel_0-1723026814018.png312×448 15.1 KB

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

4

Hello @umrraz90
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file.

.moving-text h2 {
font-size: 15px !important;
}

result

26.png
26.png428×814 124 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Thank you!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

7

Hi Moeed,

See below, on mobile, when i view it the second moving text is a lot smaller than the other text see below.. how can i change this also please?

https://www.theflowerstudiobyroo.co.uk/pages/workshop-events

umrraz90_0-1723111958316.png
umrraz90_0-1723111958316.png411×680 137 KB