Centre Specific Rich Text on Mobile

Shopify Discussion

Topic summary

A Shopify store owner needs CSS code to center-align a rich text section on mobile devices while keeping it left-aligned on desktop, preferably without modifying the base CSS file.

Multiple solutions proposed:

  • Adding CSS to base.css file targeting the specific rich text heading class with media queries for mobile screens (max-width: 768px)
  • Inserting custom CSS in theme.liquid file above the or tag
  • Using section-specific custom CSS targeting h2 elements within media queries

Current status:
The original poster reported that at least one suggested solution didn’t work (shown via screenshot). The most recent response provides a targeted solution using the specific section ID (#shopify-section-template–19130582892786__rich_text) to be added to theme.liquid, which may be more precise than previous generic approaches.

The discussion remains ongoing as the issue hasn’t been confirmed resolved. Screenshots demonstrate the desired mobile centering effect that multiple contributors are attempting to achieve.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Can someone give me the css that I can put into the specific section code to align only on this rich text section? Instead of going through base css

I want it centred on mobile, left on desktop. Thank you!

URL: https://www.livwithin.com.au/?_ab=0&_fd=0&_sc=1

PW: pewpog

Screenshot 2025-03-18 at 15.50.42.png
Screenshot 2025-03-18 at 15.50.42.png3840×2400 784 KB

1 Like
2

MustafA16_0-1742277471605.png
MustafA16_0-1742277471605.png269×484 186 KB

try this one and if this is help ful to you then please do not forget to like and mark it solution

3

MustafA16_1-1742277695556.png
MustafA16_1-1742277695556.png1280×555 888 KB

in desktop try this one

4

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

@media screen and (max-width: 768px) {
.rich-text__heading.rte.inline-richtext.h2.scroll-trigger.animate--slide-in {
text-align: center;
margin-bottom: 17px !important;
}
}

result

34.png
34.png372×497 240 KB

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

5

Hey @ellacoker

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-1742278898997.png
Moeed_0-1742278898997.png371×667 329 KB

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

Best Regards,
Moeed

6

Please add this code to Custom CSS of that section.

@media (max-width: 749px) {
h2 { text-align: center; }
}
7

Hello, for some reason, this didnt work. Please see screenshot

Screenshot 2025-03-19 at 15.18.13.png
Screenshot 2025-03-19 at 15.18.13.png2541×1390 306 KB

8

Hi @ellacoker

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

<style>
@media (max-width: 767px) {
#shopify-section-template--19130582892786__rich_text h2 {
    font-size: 18px;
    text-align: center;
}
}
</style>

PageFlyRichard_0-1742366140669.png
PageFlyRichard_0-1742366140669.png225×400 151 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly