How can I eliminate mobile view white space in Debut theme?

Store Design
1

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
IMG_8C6D37A4E940-1.jpeg1242×2688 625 KB

1 Like
2

Hi allyhendrick,

  1. Find the custom-content.liquid file in your theme code.
  2. Replace the first line
    with
  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;
   }
}
3

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)

1 Like
4

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

1 Like
5

Perfect! Worked like a charm. Thanks again!

6

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.