Help needed editing Debut Theme to add Sections to landing pages

Solved
wizz_kid82
Tourist
7 0 2

Good Day!

I am using the Debut theme.  As you all know, with Debut, the default layout only lets you add sections to the Home page.  Leaving the rest of the site looking very bland.  I I used used the information in this blog

https://penditude.com/blogs/blog/shopify-debut-theme-tutorial-how-to-add-sections-to-landing-pages

to be able to add sections to other pages that I've created. Everything so far has been going smoothly, except for 2 things- 

When adding sections to new pages, the sections suddenly have larger padding on the left and right side.  This is not the case when adding the same sections on the home page..

This is how it looks on an a new page -  Screen Shot 2021-09-15 at 11.58.41 PM.png

 

And this is how sections look on the home page - Screen Shot 2021-09-16 at 12.01.31 AM.png

 

The Second issue I am finding is with the Collections List section.  When added to a new page, it has misaligned bullet points (first Image) that are not visible when the section is added tot he home page.

 

I would greatly appreciate any help that can fix these problems and allow my store to have a consistent layout.  

 

Thanks!

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
9158 1560 1922

This is an accepted solution.

@wizz_kid82 ,

.rte ul {
    list-style: none;
    margin: 0;
}
.grid__item.medium-up--five-sixths.medium-up--push-one-twelfth {
    width: 100%;
    left: 0;
}
.template-page .page-width {
    padding: 0;
}


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 8 (8)
oscprofessional
Shopify Partner
9158 1560 1922

Hello @wizz_kid82 ,
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) where you want to do modification, so that I will solve your issue here!

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
wizz_kid82
Tourist
7 0 2

Hi! 

The site it https://southdale-family-resto.myshopify.com/ You will easily see layout change when moving between the home page and the Menu page. 

The offset bullet points are also visible on the collection sectio of the Menu page.

Thanks for the assist! 

oscprofessional
Shopify Partner
9158 1560 1922

Hi @wizz_kid82 ,

Password Please

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
wizz_kid82
Tourist
7 0 2

Oh yes, sorry about that. Password is aulots

oscprofessional
Shopify Partner
9158 1560 1922

This is an accepted solution.

@wizz_kid82 ,

.rte ul {
    list-style: none;
    margin: 0;
}
.grid__item.medium-up--five-sixths.medium-up--push-one-twelfth {
    width: 100%;
    left: 0;
}
.template-page .page-width {
    padding: 0;
}


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

wizz_kid82
Tourist
7 0 2

Hi!

I didn't see a theme.scss.liquid in the Assets folder, but I did see a theme.css and put the code at the bottom line and it worked great. My landing pages no longer have the extra padding and the bullet points on the Collection List are gone.

Thank you very much for your help in this matter!!

 

Screen Shot 2021-09-18 at 12.36.48 AM.png

oscprofessional
Shopify Partner
9158 1560 1922

@wizz_kid82 ,

for landing page padding : share screenshot please !

Thank you !

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9158 1560 1922

Hi @wizz_kid82 ,

for collection page add this in same file

li.list-view-item {
    list-style: outside;
}

it will look like this 

oscprofessional_0-1631948936123.png

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87