How can I adjust the width of legal pages for mobile view?

Technical Q&A
1

Hello coding masters,

I think I am having the same problem as others and I saw a partial solution in the post of:

https://community.shopify.com/c/Technical-Q-A/How-to-Increase-Width-of-Legal-Policy-Pages-The-container-is/td-p/677664

Solution:

[Quote]

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss->paste below code at bottom of file

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

[Unquote]

Since I want a 65% max-width so I amend it a bit, and the codes works perfectly on desktop version, but then the width of my mobile version was contained at the same time - which means it is distorted and narrowed somehow and fails to work on mobile version. (See below screenshot)

S_Patrick_0-1620734267914.png
S_Patrick_0-1620734267914.png2736×1824 668 KB

Any idea how to fix it?

Thanks in advance!

2

hello @S_Patrick

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

3

Hello, I have sent you a mail regarding to the info.

Thanks for your help!

4

hello @S_Patrick please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

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

Wow it REALLY works, thanks for your help!

Have a nice day.