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

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

1 Like

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 tag


RESULT:

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

Best Regards,
Moeed

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 on theme.liquid

@media screen and (max-width: 767px){ div#Banner-template--18324054081774__image_banner_H7jKjJ .banner__content { display: none !important; } }

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

HI @Alexandria2021

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

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