Adjust some spacing on Debut theme

Highlighted
Explorer
89 0 20

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
295 26 41

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
89 0 20

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
55 4 6

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 :))

Want to get customization to your store or bug fixing quickly? Hire Me for an hour for only $20 (Or get a fixed quote)
Hire Me For
  • Store Setup
  • HTML, CSS, JS, JQuery and Liquid coding
  • Bug Fixing

Email at umairabbascs@gmail.com or visit YoFlare

0 Likes
Highlighted
Explorer
89 0 20
@UmairAbbas thank you. URL is findsteals.com
0 Likes
Highlighted
Explorer
89 0 20
Hi @UmairAbbas, do you have a update on this?
0 Likes
Highlighted
Explorer
89 0 20
Hi @Ash could you help me?
0 Likes
Shopify Partner
55 4 6

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 :))

Want to get customization to your store or bug fixing quickly? Hire Me for an hour for only $20 (Or get a fixed quote)
Hire Me For
  • Store Setup
  • HTML, CSS, JS, JQuery and Liquid coding
  • Bug Fixing

Email at umairabbascs@gmail.com or visit YoFlare

0 Likes
Highlighted
Shopify Staff
Shopify Staff
295 26 41

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