Solved

How to remove white space on mobile only

allyhendrick
Tourist
10 0 2

Hi all,

I'm using the Debut theme and I'm having trouble removing the white space around one custom content section on mobile view only(see below)

My store is https://sovery.store/

Can anyone assist? Thanks!

IMG_8C6D37A4E940-1.jpeg

Accepted Solution (1)
FreshNarrative
Shopify Partner
133 19 27

This is an accepted solution.

Great! Depending on which devices you'd like to remove it for add the following to the bottom of the theme.scss file.

Mobile Only:

.template-index .main-content{
   @include media-query($small){
      padding-top: 0;
   }
}

 For Mobile and Desktop

.template-index .main-content{
      padding-top: 0;
}

 

Thanks,

Kyle

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.
Email: hello@freshnarrative.io
Cocoa Beach, Florida

Monday - Friday | 9 AM — 5 PM EST

View solution in original post

Replies 5 (5)

FreshNarrative
Shopify Partner
133 19 27

Hi allyhendrick,

  1. Find the custom-content.liquid file in your theme code. 
  2. Replace the first line <div class="page-width"> with <div class="page-width no-mobile-padding">
  3. Find the theme.scss file in your theme code.
  4. Add the following code to the last line:
.no-mobile-padding{
   @include media-query($small){
      padding: 0 !important;
   }
}
Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.
Email: hello@freshnarrative.io
Cocoa Beach, Florida

Monday - Friday | 9 AM — 5 PM EST
allyhendrick
Tourist
10 0 2

Thank you so much, that fixed the sides! 

Do you have any advice on how to remove the space below my nav menu above the first section? (I don't want to remove the space between all sections- there is more custom content below)

FreshNarrative
Shopify Partner
133 19 27

This is an accepted solution.

Great! Depending on which devices you'd like to remove it for add the following to the bottom of the theme.scss file.

Mobile Only:

.template-index .main-content{
   @include media-query($small){
      padding-top: 0;
   }
}

 For Mobile and Desktop

.template-index .main-content{
      padding-top: 0;
}

 

Thanks,

Kyle

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.
Email: hello@freshnarrative.io
Cocoa Beach, Florida

Monday - Friday | 9 AM — 5 PM EST
allyhendrick
Tourist
10 0 2

Perfect! Worked like a charm. Thanks again!

allayurvedic
Visitor
2 0 0

It is a great solution. Can you help me remove space between mobile number from shipping address. It is like 12345 67890 but I need to make it 1234567890. Please if someone can help.