Adjust some spacing on Debut theme

Highlighted
Explorer
82 0 18

Hi there,

 

I'm looking to adjust a few margins and padding in the debut theme.

 

1. For the footer, I want to remove the white space above it: 

 

footer.JPG

2. I'm also looking for what I need to adjust to change padding under collection title on home page:

collection title.JPG

3. I also want to remove the padding on the side in mobile for product description IMAGES.

product page.JPG

 

Help with any of these would be appreciated!

 

Thank you!

1 Like
Highlighted
Shopify Staff
Shopify Staff
275 24 40

Hey, @augds!

 

Ash here from the Shopify team.

 

I understand that you're looking to decrease the amount of whitespace on certain sections of your website. While this is something our theme support team may be able to assist with, I do want to share some information with you that may impact your final decision. Based on Human Factor International's research, whitespace can actually help increase the comprehension factor of a website by nearly 20% for your visitors and customers. Added whitespace gives emphasis to your call to action buttons and key information, and is especially valuable on product pages where customers can select variants. 

 

Another human factor that can be overlooked at times is those who have accessibility requirements to help with vision or mouse / click movement on a website. Having options and sections too close together could potentially result in mis-clicks, or a frustrating experience. If you're interested in reading some more research on whitespace before making a final decision, there's a great article I suggest checking out here.

 

If you'd still like to proceed with making these changes, and would our theme support team to take a look into them, please feel free to reply back here and let me know! I'll be glad to get the ball rolling for the next steps. 

Ash | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Explorer
82 0 18

Hi @Ash 

 

I totally understand. These are just some aesthetic changes I would like to make. I think it will still look very nice afterward. 

I would really appreciate your help. 

 

Thanks!

0 Likes
Highlighted
Shopify Partner
41 2 5

Hi @augds,

Share the url of your shopify store and I'll post a specific solution (code) for your store here.


Let me know if you need any other help.

cheers :))

Need more help? Shot me a message through live chat on my website YoFlare.com
Was my answer helpful? Hit like ♥ and Accept Solution ☑
Hire me for ✔ Theme modification ✔ Bugs fixing ✔ Store Development ✔ Custom coding
✔ OnSite SEO ✔ Conversion Optimization ✔ Speed Optimization
At the most affordable rates
0 Likes
Highlighted
Explorer
82 0 18
@UmairAbbas thank you. URL is findsteals.com
0 Likes
Highlighted
Explorer
82 0 18
Hi @UmairAbbas, do you have a update on this?
0 Likes
Highlighted
Explorer
82 0 18
Hi @Ash could you help me?
0 Likes
Highlighted
Shopify Partner
41 2 5

Hi @augds,

I see you've already done the first 2 changes. Here is the solution for the 3rd one.

 

Paste the code in theme.scss.liquid

 

@media only screen and (max-width: 480px) {
{
#ProductSection-product-template {
padding: 0px; 
//To increase padding change the value from 0 to some +ve value
}
}
}

Let me know if you need any other help.

Cheers :))

Need more help? Shot me a message through live chat on my website YoFlare.com
Was my answer helpful? Hit like ♥ and Accept Solution ☑
Hire me for ✔ Theme modification ✔ Bugs fixing ✔ Store Development ✔ Custom coding
✔ OnSite SEO ✔ Conversion Optimization ✔ Speed Optimization
At the most affordable rates
0 Likes
Highlighted
Shopify Staff
Shopify Staff
275 24 40

Hi, @augds!

 

Absolutely, I'm happy to help out. I see that @UmairAbbas has provided a potential solution via code for your requests. Would you like to give that a try before we loop in our theme support team? If so, may I suggest creating a duplicate of your theme so that you have a backup with no code edits made? If existing code changes are on a theme, it may limit the amount of customization our theme support team can do. 

In order to duplicate a theme, from your admin head over to your Online Store> Themes, and click the "actions" menu on the theme you want to duplicate. On that menu, you should see an option to duplicate your theme. 


Let me know how everything goes, and how you would like to proceed. You can reply right back here and I'll be happy to continue helping out if need be. 

Ash | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes