Help getting rid of white space below the footer on mobile view only- Spotlight theme

[gavboy555]

Hello, I would like to remove this big white spot that is below the footer and it is only on the mobile view. Any help is greatly appreciated!

URL: https://www.tansokr.com/

[namphan]

Hi @gavboy555,

Please go to theme.liquid file, find '</head>' tag and add code:

{%- if request.page_type == 'index' -%}
      <style>
        body {
          grid-template-rows: auto 1fr auto !important;
        }
      </style>
{%- endif -%}

[gavboy555]

Hey I really appreciate your reply once again, this one doesn't seem to work when I add it to theme.liquid.

[namphan]

Hi @gavboy555,

Can you help me add the code again? I will check it.

Or I can send you a collaborator invitation, it will help me check everything best

[gavboy555]

Thank you! I am doing this now

[namphan]

Hi @gavboy555,

The error is caused by the body's 'grid-template-columns' code, because it is missing a row, so you just need to change the code for the home page, it will display fine 😊

[gavboy555]

Okay I see. I was messing around with the margins and that wasn't really helping anything. How can I go about adding the missing row?

[namphan]

Hi @gavboy555,

Can you try with the code I sent before, or can I send you a collaborator invite? it will help me change things quickly

[gavboy555]

The shopify servers are currently down so I will work on this tomorrow and reach back out to you. Thank you so much!

[namphan]

Hi @gavboy555,

You're welcome and happy to help 😊

[tim]

As mentioned already, this is because body is set to display:grid;. If you change the grid-template it will fix this, but if some app will change your page structure, the problem may reappear.

Go to your Theme Settings and add this to "Custom CSS":

html body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  margin-bottom: auto;
}

This will make your footer stick to the bottom of the page and is more flexible the fixing the grid.

[GTLOfficial]

Hello @gavboy555 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

#shopify-section-template--19166707187947__image_banner_KLxJQd .banner__content.banner__content--middle-center {
margin-bottom: 0px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[GTLOfficial · Accepted solution]

Hello @gavboy555 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

#shopify-section-template--19166707187947__image_banner_KLxJQd .banner__content.banner__content--middle-center {
margin-bottom: 0px !important;
}

result

Thanks