Hello everyone!
I need help with changing the size of the headline in “Rich text” section on mobile only. See image attached.
Thank you very much in advance!
Best regards!
Topic summary
A user needs to reduce the headline font size in Shopify’s “Rich text” section, but only on mobile devices. An attached screenshot shows the current oversized headline.
Solution Provided:
Multiple community members offered the same CSS-based fix using a media query targeting screens up to 768px wide. The code targets the specific heading class and reduces the font size (suggestions ranged from 25px to 32px).
Implementation Steps:
- Navigate to Shopify Admin → Online Store → Themes
- Either use the “Custom CSS” option in Theme Settings, or
- Edit the theme code directly by adding the CSS to the
base.cssfile in the assets folder
One responder included a screenshot demonstrating the successful result after applying the fix. The discussion appears resolved with a working solution.
Hello @elevo123
Please provide url and password of your store.
@elevo123
If you provide the store url and password it will help the community people to give support fast. Also help you to save time. Can you please share those.
If you are expert in CSS in that case you need to select the heading selector with CSS then need to write media query for it like bellow.
@media screen and (max-width: 749px) {
.my_heading h1 {
font-size:20px!important;
}
}
Hi @elevo123 can you share store url?
How to Add This to Shopify Dawn Theme:
- Go to Shopify Admin → Online Store → Themes.
- Click “Customize” on your Dawn theme.
- In the theme editor, go to “Theme settings” (bottom left).
- Scroll down and click “Custom CSS”.
- Paste the above CSS code and save changes.
Alternative (Edit Theme CSS Directly):
- Go to “Online Store” → “Themes”.
- Click “Actions” → “Edit code”.
- Open base.css inside the assets folder.
- Paste the CSS at the bottom and Save.
@media screen and (max-width: 768px) {
h2.rich-text__heading.rte.inline-richtext.h1.scroll-trigger.animate--slide-in {
font-size: 32px;
}
}
It will solve your issues.
Thank you
Hi @elevo123
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
media (max-width: 768px) {
h2.rich-text__heading.rte.inline-richtext.h1.scroll-trigger.animate--slide-in {
font-size: 25px !important;
}
}
Result
Best,
Daisy