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

0 Likes
ChoosiZon
Navigator
314 54 83

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.

Create
Launch
Donate
dmwwebartisan
Shopify Partner
7428 1762 2360

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 | Bag is a cart drawer that maximizes your sales. View app →
Moulinscalagran
New Member
1 0 0

What does a page handle mean?

0 Likes
suyash1
Shopify Partner
3015 329 504

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
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 %}

 

 

0 Likes
suyash1
Shopify Partner
3015 329 504
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.
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
MS-WEB-DESIGNER
Shopify Partner
2818 176 474

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.

0 Likes
Barknpaws
New Member
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

0 Likes
whipitgood
New Member
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

0 Likes