How to adjust the width of the rich text section in the Enterprise theme

Store Design
, ,
1

Can someone help me to adjust the width of the rich text section in the Enterprise theme please?

I’ve tried adding the following custom css to a specific section on a page which widens it a bit but not by much, and applying it to multiple sections on a page doesn’t seem to work:

.max-w-text-overlay {
max-width: 100% !important;
}

Thank you

2

Hey @s_e_86

If this doesn’t work, please share the link to your store (the specific page where this issue is on) for me to take a look. Thanks!

.max-w-text-overlay {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
3

Thanks for this.

I’ve since found the ‘wide text on large screens’ checkbox in the rich text layout settings. This widens the text area, not to the full width but wider than without the box being checked.

I’ve tried your code in the custom css code and it isn’t widening the area any further, so I assume I’ve reached the limit. It’s a shame, as there’s quite a bit of unused space which would have been useful on a page with a lot of text on.

4

Well, I’m only making a guess on the code, because you didn’t provide the link to your store, if you did I could take a look and check where exactly the code needs to go and what codes needs to go there. Maybe .max-w-text-overlay is not even the correct class

5

Hi

The site I’m working on which uses the Enterprise theme is not yet live.

The working url is https://85c208-c4.myshopify.com/ password chowgh

The text referred to is on the About page.

Thank you very much.

6

Is it this one that you want to change?

ThePrimeWeb_0-1716378301215.png
ThePrimeWeb_0-1716378301215.png1177×196 9.16 KB

7

Yes, and the text above re ‘Our Mission’.

‘Our Mission’ and ‘Our Aims’ are separate rich text sections as I can’t see a way to specify different font sizes within the text body.

If I centre the text there’s a decent width, but if I left justify, it leaves a large section to the right unused. I’ve duplicated some sections to illustrate this. See ‘Our Mission (copy):’

Thank you!

8

You can use this code instead.

.shopify-section.cc-rich-text .container {
    max-width: unset !important;
}

.max-w-text-large {
    max-width: 100% !important;
}

.md-down\:px-gutter {
    padding: 0 !important;
}

If this doesn’t work in the custom css, then follow this.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716379721961.jpeg
ThePrimeWeb_0-1716379721961.jpeg1253×933 87.9 KB

9

Tried the CSS you suggested in the theme custom CSS but got error 'section selector is not supported.

I removed the section line just leaving:

.max-w-text-large {
max-width: 100% !important;
}

.md-down:px-gutter {
padding: 0 !important;
}

and this seems to work fine. I’ve checked on a desktop using a couple of browsers and on mobile.

Can I assume the CSS without the section line is ok?

Thank you

10

That is still important. You should ideally add it in, at least in the theme.liquid file.

Or try this instead.

.container {
    max-width: unset !important;
}
11

Thanks for your help!