I've added custom css in the atlier theme for privacy policy width increase but its not working

Technical Q&A
,

Topic summary

Custom CSS to widen the Shopify privacy policy page in the Atelier theme isn’t taking effect. The author set .shopify-policy__container to max-width: 60% (and at ≥1215px: max-width: 60%; margin: 0 20%) and shared the live link.

A responder found conflicting width rules on the same container. The custom CSS is overridden by a 560px setting, and that 560px is itself overridden by a 65ch constraint, which ultimately controls the layout.

Key details:

  • 65ch (character-based width) and 560px (pixel width) are present and take precedence over the custom 60%.
  • The screenshot (browser devtools) shows the crossed-out rules, indicating cascade/specificity order issues.

Outcome/status: No fix or final resolution provided yet. The core issue is competing width declarations overriding the custom CSS. The discussion remains open.

Summarized with AI on December 24. AI used: gpt-5.
1

I’ve added custom css in the atlier theme for privacy policy width increase but its not working can anyone suggest me why??

.shopify-policy__container {

max-width: 60%;

}

@media only screen and (min-width: 1215px){

.shopify-policy__container {

max-width: 60%;

margin: 0 20%;

}

}

link : Privacy policy – You Jewelry

1 Like
2

Looks like you have a few different width codes for the same section. Your custom css is crossed out because of the 560px, and the 560px is crossed out because of the 65ch…

Screenshot 2025-12-23 205350
Screenshot 2025-12-23 205350360×360 5.74 KB

1 Like
3

@devopsdeepak as you can see in the screenshot given by @Maximus3 , your css is overwritten, so please add !important to it, so the css becomes

.shopify-policy__container {max-width: 60% !important;}
4

Hi, @devopsdeepak
You should update your code like this

@media only screen and (min-width: 1215px){

.shopify-policy__container {

  max-width: 60% !important;

  margin: 0 20% !important;

  }
}

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

5

Hey,

Your custom CSS for .shopify-policy__container is being overridden by a more specific rule from policy-0e156355.css.

To increase the width, you can try adding !important to your max-width property in base.css to give it higher specificity:

.shopify-policy__container {
  max-width: 60% !important;
}

@media only screen and (min-width: 1215px){
  .shopify-policy__container {
    max-width: 60% !important;
    margin: 0 20%;
  }
}

Best,
Daniel Smith

6

Hey,

The CSS classes you are targeting are not present on your Privacy Policy page. The content is within a div with the class rte.

You can add this CSS to your base.css file:

.template-page .rte {
    max-width: 60%;
    margin: 0 auto;
}

Best,
Daniel Smith