Change the width of Shipping Policy page so it utilises more of the screen real estate!

Store Design
, , ,
1

I am looking to expand the width of my shipping policy page which currently is very narrow compared to both the general width of my side and the whole page.

https://gpuconnect.com/pages/our-shipping-policy

This uses the default page template, which currently (in the GUI) has a width of 1200 px, however changing this field does not seem to do anything for the width of the content displayed, no matter what I change it to.

Is there a way for me to change my default page theme so it uses 100% of the available space, making things less squished?

I am using Dawn v11

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the Bottom of the file:
.page-width--narrow {
margin: 0 auto;
max-width: 110.6rem!important;
}

ZestardTech_0-1699523494261.png
ZestardTech_0-1699523494261.png1725×659 52.9 KB

1 Like
3

Hi @coalfield ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

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

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFlyc

1 Like
4

Thank you this worked!

1 Like
5

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

6

If you’re looking to change the width of your Shipping Policy page to make better use of the screen real estate, you can typically achieve this through your website’s CSS (Cascading Style Sheets). Here’s a general guide on how to proceed:

Access Your Website’s CSS:

Depending on your platform (WordPress, Shopify, custom-coded site, etc.), locate the section where you can edit or add custom CSS.

Identify the Container or Section:

Determine the CSS class or ID associated with the container or section containing your Shipping Policy page.

Adjust the Width Property:

Once identified, you can use the width property in your CSS to set the desired width. For example:

css Copy code

.shipping-policy-container { width: 90%; /* Adjust the percentage as needed / max-width: 1200px; / Optionally, set a maximum width */ }

Save Changes and Test

Save your changes and refresh the Shipping Policy page to see the adjustments. Make sure to test on different devices and screen sizes to ensure a responsive design.

Consider Responsive Design:

If your website is designed to be responsive, you might want to use media queries to set different widths for different screen sizes.

Remember to replace .shipping-policy-container with the actual class or ID of your Shipping Policy container. For more information visit our website https://answertenant.com/