FROM CACHE - en_header

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
Shopify Partner
412 66 108

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
dmwwebartisan
Shopify Partner
11014 2378 3402

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 | Click here GemPages The most powerful Shopify page builder.
Moulinscalagran
New Member
1 0 0

What does a page handle mean?

suyash1
Shopify Partner
6164 725 1027

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

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?
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
6164 725 1027
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 - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?
MS-WEB-DESIGNER
Shopify Partner
3012 181 489

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

AlexandraM93
Excursionist
31 0 12

@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
6164 725 1027

@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.

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly | want to support?