increase the page width of all the pages I linked at the bottom (footer) so Shipping, return poicy,

Store Design

Topic summary

A Shopify store owner wants to increase the page width of footer-linked pages (Shipping, Return Policy, FAQ) specifically on mobile devices, as they currently appear too narrow.

Multiple Solutions Provided:
Four different community members offered CSS code solutions, all targeting the base.css file with similar approaches:

  • Add media queries for mobile screens (max-width: 767-768px)
  • Set .shopify-policy__container to max-width: 100% !important
  • Insert code at bottom of base.css file via Online Store → Theme → Edit Code → Assets

New Issue Emerged:
After implementing a solution, the store owner reported that tables within these pages became too wide on mobile, causing line breaks. They referenced a competitor’s site (hellobody.de) as the desired layout example.

Current Status:
The discussion remains open. One helper requested the table code to provide a targeted fix for the table width issue while maintaining the overall page width adjustment.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

I want to increase the page width of all the pages I linked at the bottom (footer) so Shipping, return poicy, FAQ etc. in the MOBILE version so it looks normal and now as narrow as it does now.

Thanks for your help :))

URL: https://taneraskin.com/

Best,

Isabelle

2

Hi @isabellemaria

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){

#MainContent .shopify-policy__container {

max-width: 100% !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

Hi @isabellemaria ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

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

Hope it helps!

4

@isabellemaria
Put below css into base.css file (Online store->themes->Edit code->Assets->base.css)

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

Ujjaval_0-1677820300785.png
Ujjaval_0-1677820300785.png1593×826 56.5 KB

5

Hi @isabellemaria

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.page-width {max-width: var(–page-width) !important; margin: 0 auto; padding-top: 36px; padding-bottom: 36px;}

Regards,

San

6

HI there,

thank you! Only the table is far too wide now. how can I get it as narrow as here https://www.hellobody.de/versandkosten-lieferung/ so it makes line breaks within the table, but also in mobile view only?

7

Hi there,

thank you! Only the table is far too wide now. how can I get it as narrow as here https://www.hellobody.de/versandkosten-lieferung/ so it makes line breaks within the table, but also in mobile view only?

8

Hi @isabellemaria ,

Please send me the code of the tablet, I will help you to edit it