Debut Theme Customization

Solved
Highlighted
Excursionist
14 0 2

Hi Everyone,

Decided to create my own website apart from another marketplace. I don't have coding background so customizing is a huge headache for me.  Thankfully I manage to find a few solutions while browsing through the forums but I am left with 3 areas which I can't seem to find a solution. I am using the debut theme.

 

Problem 1 & 2:

2..jpg

These 2 problems refer to the same problem. I would like to reduce the width of those 3 areas. I believe that setting was for mobile? I manage to customize the image with text portion below it but the top part (labelled "1.") I don't know how.

 

Problem 3:

DesktopDesktopMobileMobile

As you can see, I would like to adjust the width in between the 4 footer menus on desktop and the circled areas on the mobile which is so spaced out.

 

Would anyone be able to shed some light onto this? Really sorry if this has been asked before. Thanks for reading,

0 Likes
Highlighted
Shopify Partner
66 22 18

Hey there, happy to take a look, would just need the site's URL and password

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
Highlighted
Excursionist
14 0 2

Hi,

Thanks for replying.

URL: https://rainscraftybits.myshopify.com

0 Likes
Highlighted

Success.

Shopify Partner
66 22 18

1. Reducing padding around logo

 

Paste this code to the end of your theme.scss:

 

.site-header__logo {
    margin: 0px;
}

2. Reducing padding above main image

 

Paste this code to the end of theme.scss, the padding-top number can be increased or decreased from 15 to change that spacing.

 

.main-content {
    padding-top: 15px;
}

3. Reducing spacing around around footer items in mobile

 

Same deal, copy/paste to end of theme.scss. To change spacing, the 5px can be increased or decreased. e.g. 10px or 0px.

 

.site-footer__linklist-item {
    padding: 5px 0;
}

4. Column widths in footer

 

I wouldn't recommend changing this since it looks like the columns are well-spaced and follow good design principles. At the moment, they're automatically divided up into 4 equal columns. However, the simplest way to reduce that spacing would be to make your footer thinner on desktop:

@media only screen and (min-width: 750px) {
  .page-width {
    padding-left: 90px;
    padding-right: 90px;
  }
}

Or, if you're able to find the footer in your theme liquid, search for the class site-footer__item--one-quarter and change it to site-footer__item--one-fifth

 

Hope that helps!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
1 Like
Excursionist
14 0 2

thank you so much for your help!!!!!

1 Like