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

digi_comm
Tourist
3 0 2

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.

 

KetanKumar
Shopify Partner
18896 1985 6993

@digi_comm 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
digi_comm
Tourist
3 0 2

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?

KetanKumar
Shopify Partner
18896 1985 6993

@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%;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
digi_comm
Tourist
3 0 2

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?

0 Likes
KetanKumar
Shopify Partner
18896 1985 6993

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

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.
Regards,
Task4Store - Get Shopify Small Task Help
Contact Us
: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
1400+ Happy Clients | 25000+ Shopify Small Tasks Done
0 Likes