Widen Default Page Text Content (Terms and Policies) on Horizon Theme

Store Design
, , , ,
1

Hi there, I’m wanting to make the content on this page wider, its just text but all my policy pages look like this, the text looks too narrowly contained! Also, I would like to make. the title text smaller. I am using Horizon, how do I fix this?

I want it to look something like this.

website - raionlifestyle.com

image
image1380×754 67.3 KB

2

add this to your bottom of the base.css

@media( min-width: 769px )
{  
  .shopify-policy__container{    
    max-width: 1280px;
    width: 100%;  
  }
}
3

Hey @RaionLifestyle!

If you need to increase the width of the Policies page, then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> layout.theme.min.css

In the end of layout.theme.min.css paste the following code that shared below.

section.page-section.container.grid[data-component-handle="main-page"] {
     max-width: 1400px !important;
}

@media (min-width: 64em) {
    .main-page.critical-component-clear.liquid.col.xs-span.l3-10 {
        grid-column: 1 / 13 !important;
    }
}

Results:

image
image1599×765 48.7 KB

4

It doesn’t seem to work. I put it at the bottom and pressed save and then reloaded my page.

5

Can you send me whole screen ScreenShot so that I can take a look which theme file you’ve added the code.

6

Screenshot 2026-01-04 at 2.56.36 AM
Screenshot 2026-01-04 at 2.56.36 AM2934×1638 437 KB

7

You’ve not paste my code. My code will work. You added the code provided by @PeterGeorge

Please try to paste my code.

section.page-section.container.grid[data-component-handle="main-page"] {
     max-width: 1400px !important;
}

@media (min-width: 64em) {
    .main-page.critical-component-clear.liquid.col.xs-span.l3-10 {
        grid-column: 1 / 13 !important;
    }
}
8

Screenshot 2026-01-04 at 2.59.31 AM
Screenshot 2026-01-04 at 2.59.31 AM2888×1586 450 KB

Check my website. Still doesn’t seem to work…

9

I see.

Can you grant me collab access so that I can take a look into the theme file.

10

How do I do that? I’m new to this

11

Well, You need to share the collab code first.

Login to your ShopifyLog in Admin.

  • In the bottom-left corner, click on Settings.
  • Click Users and permissions.
  • Scroll down to the Collaborators section.
  • You’ll see a Collaborator request code — it’s usually a 4-digit number (e.g., 1234).
  • Copy that code and send it to me here.
12

9957 is the code i believe

13

I’d try avoid “!important” statement as possible.
Of course, you could add this
max-width: 1280px !important;
width: 100% !important;

14

Hi, @RaionLifestyle
Try this code by following these steps:
1: Go to the online store - Theme - Edit Code.
2: Find the theme.liquid file and add the following code before the </head> tag

<style>
@media screen and (min-width: 767px) {
    .shopify-policy__container{
         max-width: 1440px !important;
    }
}
</style>

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!