Dawn Theme - How do I remove the Empty/Blank space under Image Banner when in Mobile view

[Alexandria2021]

Hi, can anyone help me remove this blank space under the image banner when in mobile view?  I'm using two images specifically size for both desktop and one for mobile and not sure how to fix the.  website is meltmyheart.nz

Thank you in advance 

[Moeed]

Hey @Alexandria2021 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
section#shopify-section-template--18324054081774__image_banner_H7jKjJ .banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Tech_Coding]

Hello @Alexandria2021 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
     div#Banner-template--18324054081774__image_banner_H7jKjJ .banner__content {
         display: none !important;
     }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

HI @Alexandria2021 

Please uncheck option 'Show container on mobile' of your Image banner settings to solve the issue 

[GTLOfficial]

Hello @Alexandria2021 

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

@media only screen and (max-width: 768px) {
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
display: none !important;
}

result

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