Adjusting the CSS of default theme policy pages

Store Design
,
1

I have “pages” using the theme template “default page” within the Taste theme. In some of these pages I am linking them to my various policies. When the policy is displayed on the page the width is very narrow, much narrower than anything else in the Taste theme.

thisistheway_0-1725999865275.png
thisistheway_0-1725999865275.png706×250 6.67 KB

I tried to find somewhere in the code where I could modify the css for this, but it appears these policies are actually pulled from the shopify cdn and not actually stored in my theme?

thisistheway_4-1726000537386.png
thisistheway_4-1726000537386.png289×326 10.9 KB

The default page template itself is different from the collection or product pages, it’s baffling to me why they would do this, it looks very unprofessional.

thisistheway_5-1726000837561.png
thisistheway_5-1726000837561.png712×379 14.7 KB

thisistheway_6-1726000926112.png
thisistheway_6-1726000926112.png622×416 20.5 KB

UPDATE: Ok, so I got this kind of working by adding the following code to my theme.liquid:

<style>
  .shopify-policy__container {
    max-width: 1400px !important;
  }
    .shopify-policy__title {
      text-align: left !important;
  }
  </style>

thisistheway_0-1726004563966.png
thisistheway_0-1726004563966.png584×420 15.5 KB

I’d say it works like 90% because once browser window is resized to a certain width you get this:

thisistheway_1-1726004703714.png
thisistheway_1-1726004703714.png531×424 15.8 KB

I’m sure it’s because specify 1400px is probably too restrictive and the rest of the site is doing something more dynamic, but I’m not sure how to fix it.

2

Hi, @thisistheway

Can you please share the store URL so that I can assist you?

3

@thisistheway Please remove the code you used to adjust the width and use below code. It will match the policies page width as collection page.

NOTE: The below provided solution is based on the current taste theme. If it doesn’t now works for you, please share your store URL to help you on this.

.shopify-policy__container {
    max-width: 100% !important;
    padding: 0 5rem !important;
}
.shopify-policy__title {
    text-align: left !important;
}
@media screen and (max-width: 750px) {
    .shopify-policy__container {
        padding: 0 1.5rem !important;
    }
}

Please support us by clicking “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

Hi Vis,

Thanks so much for helping out. I’ve used your code as a starting point and continued to tweak and I’ve got something that looks 99% correct:

.shopify-policy__container {
    max-width: var(--page-width) !important;
    padding: 0 5rem !important;

}
  .shopify-policy__title {
      text-align: left !important;
  }

Now I just need to align all the pages (‘About Us’ is using default page template and ‘Contact us’ is using contact page template).

www.stealthiscoffee is the url and 123 is the password if you want to check and give me any tips.