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 11 (11)
ChoosiZon
Navigator
379 63 98

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.

For faster response with a fee pls email to : choositech@outlook.com ------ Donate
dmwwebartisan
Shopify Partner
9824 2236 3073

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?

suyash1
Shopify Partner
3713 408 610

@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 ,My timezone is GMT+5:30
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
3713 408 610
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 ,My timezone is GMT+5:30
MS-WEB-DESIGNER
Shopify Partner
2877 180 494

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.

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
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

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