How to fix white space above footer on Dawn theme 11.0.0?

[zach95564]

Hello, I'm having an issue with a white space above the footer on a site. The website is on Dawn theme 11.0.0. The issue doesn't appear on larger screens, only when the view is small like a tablet or mobile. If I fill the page with more content the gap becomes smaller. I'm unsure if this inspect is correct but it seems to be a part of the "main content section" 

I am using custom liquid for the video player, and QAB Hextom quick announcement bar below the footer but when I enable / disable this it doesn't make a difference. 

I've seen a similar issue to this but none of the fixes have worked for me so far. Help would be greatly appreciated. 

  

 

 

[diego_ezfy · Accepted solution]

@zach95564@zach95564, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

#MainContent{
    background: #000;
}

Since the video has a fixed aspect ratio (the "rectangle" shape), it's expected that it won't and shouldn't occupy the entire screen, this would make the video stretch. Ensuring the page's background blend in by painting it with the same color as the footer is the best bet.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

[zach95564]

I'll also add a link here to the site

https://aiponocafe.com/

[diego_ezfy]

Hello @zach95564@zach95564,

Please share:
1. your store URL;
2. page URL with the issue you mention;
3. storefront password (if your store has one).

If the store is not online yet, kindly share the preview URL.

[zach95564]

Hello! Thanks for the reply. Below is the requested information, apologies if this isn't formatted correctly. 

1. aiponocafe.myshopify.com

2. aiponocafe.com (home page) 

3. No password 

[diego_ezfy · Accepted solution]

@zach95564@zach95564, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

#MainContent{
    background: #000;
}

Since the video has a fixed aspect ratio (the "rectangle" shape), it's expected that it won't and shouldn't occupy the entire screen, this would make the video stretch. Ensuring the page's background blend in by painting it with the same color as the footer is the best bet.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

[zach95564]

Very thankful for your help, works perfectly. 

[PageFly-Richard · Accepted solution]

Hi @zach95564 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 767px){
section.shopify-section.section video{
height: 100vh;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[zach95564]

Thank you so much! Works like a charm.