Customize ONLY the width of the text "Content container" of a page

[dfaub]

I would like to customize the width of the text that ultimately appears on all “pages”, independent of the rest of the page.

I DO NOT want to widen or narrow the entire page or its other elements. I only want the ability to adjust the text width. (See image 3)

I’m speaking directly of the text that has been entered into the “Content” containers of my different pages. (see images below)

The site address is in the (1st image) -

The text within the “Content” box (2nd Image)

The adjustment of the margins (3rd image) is what I’m hoping to achieve.

Is this request possible?

Thank you in advance.

[SomeUsernameHe]

I think the easiest way to achieve this is to wrap your content in a custom

To achieve this you would want to view the source code of your content by hitting this button in the top right corner.

There you can wrap all the content in a custom div.

YOUR CONTENT HERE

and finally, add the CSS to adjust the width to your theme files.

.brand-custom-content{
max-width: 80%;
margin: auto;
}

You can adjust how wide you would like your content by adjusting the max-width %.

[dfaub]

A little more detail would be appreciated. Add the CSS where?

And… this seems to suggest that I would need to do this for every single page. I’m looking for a more simple solution to managing all pages at once.

[PageFly-Kate]

Hi @dfaub ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-page.css->paste below code at the bottom of the file:

.page-width .rte {
    max-width: 1200px;
    margin: 0 auto;
}

I hope it would help you
Best regards,

Kate | PageFly

[dfaub]

Hi Kate… Please note in my earlier detail, I am only looking to adjust the text portion, not the entire page. Isn’t your solution adjusting the entire page?

[PageFly-Kate]

Hi @dfaub ,

Sorry that I misunderstood. If you want to adjust only for some text, you can try the solution below (This solution requires you to understand basic html, css):
Step 1: Click this icon:

Step 2: Add the style width attribute to the text you want to adjust:
Syntax:
NOTE: Value: you can change it to suit your wishes
For example:

Text content

I hope it would help you
Best regards,

Kate | PageFly

[dfaub]

Hi Kate… I’m using this exactly as you described but it too does not work

Text content

Ive tried adjusting the “value” to several settings with no change.

[PageFly-Kate]

Hi @dfaub ,

Can you post your html here so we can check it out?

Best regards,

Kate | PageFly

[dfaub]

Kate: For some reason Shopify frowns on the use of the letters in the beginning of the name so I’ve attached an image with the site address.

[dfaub]

Once again Kate, I am looking for a solution for all pages at once. I do not want to go in and customize each page when adjusting “ONLY” the text