Change width for one specific page (DEBUT)

Store Design
1

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

2

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.

2 Likes
3

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!

1 Like
4

What does a page handle mean?

5

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

6

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' %}

{% endif %}
7

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.

8

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' %} 

 {% 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.

9

Hi

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

Best

10

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

{% if page.handle == ‘/pages/about’ %}

#PageContainer{ max-width:500px !important; margin:auto; }

{% endif %}

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

11

@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

12

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

13

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!