How to format rich text for mobile version?

[Tinctoria]

My rich text sections look extremely narrow in the mobile version, is there any way to code them to be wider specifically in the mobile version? Also, for context I am currently using the code shown in the ss below for my rich text sections:

In the mobile version, this is how my rich text sections look (literally so narrow that only one letter is showing up per line):

What can I do? Here is the link to my website: https://0a272e-93.myshopify.com/

[niraj_patel]

Hello @Tinctoria

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) { #shopify-section-template--17174517579942__rich_text_9Yd4ag .rich-text-description{ padding: unset !important; } #shopify-section-template--17174517579942__rich_text_9Yd4ag .rich-text-description p{ margin-left: unset !important; margin-right: unset !important; } }

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

[Sweans]

Hi @Tinctoria

Try the following code

.rich-text-description p {
   
    margin-left: 0px !important; 
    margin-right: 0px !important; 
}

Result:-

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

[Moeed]

Hey @Tinctoria

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

[Huptech-Web]

Hello! @Tinctoria Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “theme.min.css ya theme.css”
6. Add the following code at the end of the file.

body .rich-text-description p {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank You
K.k

[GTLOfficial]

Hello @Tinctoria

Go to online store ----> themes -----> actions -----> edit code----->theme.min.css
add this code at the end of the file.

.rich-text-description p {
text-align: center;
margin-left: 5rem !important;
margin-right: -5rem !important;
}

result

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

[Tinctoria]

Thanks! This worked, but only for the rich text box on the home page. There are a few more rich text boxes with no additional code (for these rich text boxes, i did not apply the code which i had pasted a screenshot of in my original post), and the code you sent me is not working for those rich text boxes (example- one rich text box on the about us page, faq page). what should i do for that?

[Tinctoria]

Thanks this worked!!

[Moeed]

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.

[niraj_patel]

I thought you only needed code for these specific sections…sorry for my mistake
you can add

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-description{ padding: unset !important; } .rich-text-description p{ margin-left: unset !important; margin-right: unset !important; } }

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

[Tinctoria]

hi I also wanted to make these rich text sections smaller only for the mobile version (like smaller font, smaller box). How can I do this?

[Huptech-Web]

Hello! @Tinctoria Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

@media only screen and (min-width: 767px){
body .rich-text-content .content-heading {
    font-size: 26px;
}
body .rich-text-description p {
    font-size: 13px;
}
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[Tinctoria]

Hi what do you mean by my custom CSS file? what is the name of the file i need to open (is it theme.liquid?)