Problem centering rich text on mobile

[ellacoker]

Would someone be able to take a look at the screenshot and tell me why this isnt centering my rich text on mobile?

I only want to apply this code to this specific section. It works without the @media part

URL: https://www.livwithin.com.au/pages/our-story

PW: pewpog

[Moeed]

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:

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

Best Regards,
Moeed

[ellacoker]

hello,

i only want it to be for this one specific rich text, not all of them, and also, only in mobile

[Moeed]

Hey @ellacoker

Replace the previous code with this code below

RESULT:

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

Best Regards,
Moeed

[PageFly-Richard]

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

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[Dotsquares]

Hi @ellacoker ,

Your code looks correct for centering the rich text on mobile devices. However, if it’s not working, replace the previous CSS with the below CSS to override any other styles:

@media screen and (max-width: 749px) {
.rich-text__blocks.left {
text-align: center !important;
}
}

Also, note that without the @media query, the text alignment would apply to all screen sizes, not just mobile. Let me know if you need further adjustments!

Regards,