DEBUT Theme - Legal policy pages - How to change width

Store Design

Topic summary

Goal: change the narrow width of Shopify legal/policy pages in the Debut theme, with different widths for desktop and mobile.

Key update (resolved for Debut):

  • Solution: add CSS media queries targeting the policy container.
    • Desktop (≥480px): .shopify-policy__container { max-width: 70% !important; }
    • Mobile (≤480px): .shopify-policy__container { max-width: 100% !important; }
  • Placement: Assets > theme.scss in Debut.
  • Outcome: confirmed working by the original poster.

Notes:

  • CSS media queries apply styles based on viewport width (here, 480px breakpoint) to set different max-widths per device.
  • The store was password-protected/unpublished initially, prompting a request to share access.
  • A code snippet is central to understanding the fix.

Open items (Dawn theme):

  • Another user asked where to apply similar code in Dawn; attempts in main-page.liquid and theme.liquid did not affect Policy Pages.
  • Helpers requested store URLs to investigate; one URL was provided. No confirmed solution posted yet for Dawn.

Status: resolved for Debut; unresolved/ongoing for Dawn with further guidance pending.

Summarized with AI on February 4. AI used: gpt-5.
1

Hello !

I’m using debut theme. I created “legacy policy” pages on my website, from the Shopify’s templates (Account > Settings > Legal policy).

I would like to expand the width of the policy / legal pages. The text is very narrow.

Legal policies width.png
Legal policies width.png1822×964 155 KB

I added this code to Assets > theme.scss :

/================ Mise en page politiques légales ================/
.shopify-policy__container {
max-width: 70% !important;
}

It works perfectly for computers ! But on my mobile I don’t like the width, I would it to be different. I would like a max-width: 100% on mobiles, and 70% on computers (like a “normal” displaying, like all others pages created with debut theme). How can I do please ?

My website is not published yet : https://theannexparis.com/

Thank you in advance for your help !

1 Like
2

Hello, @Johjoe

Welcome to the Shopify community!
and Thanks for your Good question.

your store is password protect can you please share us.

1 Like
3

Hi @Johjoe ,

Simply replace the code you added with the following code.

@media only screen and (min-width: 480px) {
.shopify-policy__container {
max-width: 70% !important;
}
}

@media only screen and (max-width: 480px) {
.shopify-policy__container {
max-width: 100% !important;
}
}

Replace the above code with the code you added and it’ll be 70% on desktop and 100% on mobile. Let me know if you need my help with anything else.

Best of luck with your startup!

3 Likes
4

Perfect ! @UmairA Thank you so much for your help, it works perfectly !

5

Do you know where I can apply this code for the Dawn theme? I’ve tried in main-page.liquid and theme.liquid but it wouldn’t change my Policy Pages.

1 Like
6

@cutecatlady

can you please share store url so i will check and guide you

7

Hi, have the same question.

https://www.schraenke-geschenke.de/

Thanks for your help.

8

Hi, have the same question.

https://www.schraenke-geschenke.de/

Thanks for your help.