Change width for one specific page (DEBUT)

cientee
Tourist
5 0 2

Hello everyone!

As the title suggests, I would like to change or increase the width of one page, Contact Us page, and keep the rest of my website the original size. I hope someone will be able to assist me!! Thank you

 

website: cientee.com

password: tibbers4uu

Replies 12 (12)

ChoosiZon
Shopify Partner
416 66 111

You can do like this :

 

Add this to bottom of page.liquid :

 

{% if page.handle == 'test' %}
<style>
#PageContainer{
  max-width:400px !important;
  margin:auto;
}
</style>
{% endif %}

Then change test to your page handle n 400px to the width you want.

Donate
For faster response with a fee pls email to : choositech@outlook.com
Moulinscalagran
Visitor
1 0 0

What does a page handle mean?

suyash1
Shopify Partner
9077 1129 1479

@Moulinscalagran - please check URL in the browser, the page name is your page handle

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
cdanielc
Tourist
16 0 1

Thanks for the solution! However, I run into an issue. I have added the below code to the page.liquid in order to control the max-width of one of my pages but noticed that the footer also is affected by the max-width. Is it possible to just change the width of the page content? 

 

{% if page.url == '/pages/about' %}
<style>
#PageContainer{
  max-width:700px !important;
  margin:auto;
}
</style>
{% endif %}

 

 

suyash1
Shopify Partner
9077 1129 1479
may be footer is part of the container, please check if you have any other
div tag with some class name which has page content.
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey there,

 

{% if page.url == '/pages/help-center' %} 
<style>
.page-width {max-width: 100% important;}
</style>
{% endif %}

add above code at top of the templates/page.conatct.liquid file
if you are using page template then add above code in templates/page.liquid

 

Hope this helps.

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

MS-WEB-DESIGNER
Shopify Partner
3012 181 484

Dear @cientee 

Hope the following suggestion will help you

  • From your Shopify admin, go to Online Store > themes
  • Locate your current theme and then click Actions > Edit code
  • After that in the Assets folder, click to open your theme.scss.liquid file
  •  Add above code at top of the templates/page.contact.liquid file

 

/* Start */
{% if page.url == '/pages/contact-us' %} 
<style>
 .jas-container {width: 100% important;}
 </style>
 {% endif %}
/* End*/ 

 

  • You can change the page URL & CSS Style yourself. Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  •  Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

Barknpaws
Visitor
1 0 0

Hi

can you guide me how to change image with text & text column with image to full width? im on debut theme

Best

whipitgood
Visitor
2 0 0

Just did this and it didn't work on my page:

 

{% if page.handle == '/pages/about' %}
<style>
#PageContainer{
max-width:500px !important;
margin:auto;
}
</style>
{% endif %}

 

Here is my page: https://whipitgood.ca/pages/about

AlexandraM93
Excursionist
31 0 13

@MS-WEB-DESIGNER @suyash1 

Do you have any advice in changing the main page width on desktop view? It’s stretched right across. I would like to make it smaller, whilst keeping mobile view the same. 

my page is byeheat.com.au

 

I would appreciate all feedback and help!  

alex 

suyash1
Shopify Partner
9077 1129 1479

@AlexandraM93- it can be done, do you want entire page width to be reduced or slideshow sections? because reducing entire page will affect featured collection content and any other section which you will add later.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

thisisbeauty
New Member
4 0 0

Hello!

 

I am looking for help on limiting the page width on one page on my theme (not all pages). Any help would be appreciated!

 

https://thisisbeauty.us/pages/about-our-products

 

Thank you!