Content Alignment

Store Design

Topic summary

A user seeks to center-align descriptive text (“natural…radiance”) on mobile devices to match the title alignment on their Shopify store.

Proposed Solutions:
Multiple developers provided CSS code snippets targeting the .m-richtext__description class with text-align: center for mobile screens (max-width: 767px or 768px).

Implementation Steps:

  • Access Online Store → Theme → Edit code
  • Insert CSS either in theme.liquid (before </body> tag), theme.css/theme.scss files, or before </head> tag
  • One solution specifically targets the slider section ID with additional flexbox centering properties

Status:
Multiple working solutions provided with visual confirmation. The discussion appears resolved, pending the user’s implementation and confirmation.

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

How can i align the text from “natural…radiance” also in the middle like the title. Only for mobile.

URL is www.lunalucente.com

Image 21-08-2024 at 17.21.jpeg
Image 21-08-2024 at 17.21.jpeg746×890 71.5 KB

1 Like
2

Hello @lunalucenteskin

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){ .m-richtext__description p { text-align: center !important; } }

niraj_patel_0-1724241525621.png
niraj_patel_0-1724241525621.png319×367 114 KB

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

3

Hi @lunalucenteskin , I hope you are doing well,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.scss or theme.css file
  3. Paste the below code in the file and save
@media only screen and (max-width: 768px) {
    .m-richtext .m-richtext__description.rte {
        text-align: center !important;
    }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

Hi @lunalucenteskin ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1724241547733.png
BSSCommerceHDL_0-1724241547733.png1397×472 112 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

Hi @lunalucenteskin ,

Could you please add the below CSS in the theme stylesheet.

#m-slider-template--22392517198168__slider_FUXE9H .m-slide__content {
  margin: 0 auto;
  text-align: center;
}
#m-slider-template--22392517198168__slider_FUXE9H .m-slide__button {
  display: flex;
  justify-content: center;
}

Result:-

Sweans_0-1724242022609.png
Sweans_0-1724242022609.png500×896 343 KB

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans