Remove White Space Debut Theme

Solved
Tourist
16 0 0

Hello!!

 

I would like to remove the white space between my header and my items.  I would also like to decrease the amount of the grey that is around my header image when it is viewed on a mobile phone.  Screenshots attached.

 

removewhitespace.JPGdesktop white spacemobilescreenshotwhitespace.jpgmobile whitespace

 

0 Likes
Shopify Expert
665 170 199

Hi, @greenoak ,

This is Evita from On The Map.

 

Can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
16 0 0

Of course--- green-oak-furniture.myshopify.com

0 Likes

Success.

Shopify Expert
665 170 199

Add this code to Assets/theme.scss.liquid file:

For white space

.index-section:first-child {
     padding-bottom: 0!important;
}
#shopify-section-1567532236832 {
     padding-top: 0!important;
}

For mobile white gray space:

@media screen and (max-width: 749px) {
  .hero--medium {
    height: 10rem;
    width: 100%;
    background-size: cover;
   }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
16 0 0

Do I add this at the end of the existing code?

0 Likes
Tourist
16 0 0

That worked! Thank you!

0 Likes
New Member
1 0 0

Hello, I have the same problem and the solution for desktop PC is working great, however there is still white space between header image and products on mobile phone. Could you please advise what changes do I need to do? Thank you! Website url: www.myzoostore.com

 


@OTM wrote:

Add this code to Assets/theme.scss.liquid file:

For white space

.index-section:first-child {
     padding-bottom: 0!important;
}
#shopify-section-1567532236832 {
     padding-top: 0!important;
}

For mobile white gray space:

@media screen and (max-width: 749px) {
  .hero--medium {
    height: 10rem;
    width: 100%;
    background-size: cover;
   }
}

 

0 Likes