How to change the size (width) of the page in debut theme

Store Design
1

Hi Shopify Community,

I have been trying to edit the pages of Debut theme for my shopify store. And have successfully been able to add segments to the page. The idea is to make it look similar to the Homepage or at least make it editable like the homepage.

Although, I am able to add the segments but the width of the segments is not getting properly adjusted for the page. The content width doesn’t adjust properly as it does for Homepage.

Can anybody suggest what changes would help me to achieve proper mobile and desktop rendering of segments on “pages” like the homepage?

Thanks in advance.

1 Like
2

@digi_comm

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Hi @KetanKumar

Thank you for your response.

Here is the demo page I made. Link

Now, if you notice, my hero image or any other section does not fit as it does on the homepage. Maybe, it is because of the page-width container. But I am not able to rectify it. How can i make my new page width the same as the home page so that my added sections looks the same as they do on homepage?

1 Like
4

@digi_comm

thanks for the details can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.template-page .main-content .medium-up--push-one-twelfth { left: 0;width: 100%;}
5

Hi @KetanKumar ,

I did apply it and it did make it look more like the homepage but not entirely like it. Like for eg., The hero section on the homepage covers the full page while here the code just made it stretch. You can revisit the page and check it once again to see what i am saying.

Also, since i made a new page template by the name “about us” does your code works for any new page template we make or we need to customize it for every specific page template we make?

6

@digi_comm

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

7

Dear @digi_comm

Hope the following suggestions 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.
  • Go to the very bottom of this file and paste the following code:
/* Start */
.template-page .page-width {max-width: 100% !important;} 
/* End*/
  • Save and check your theme by refreshing it.