Hello everyone
The banner size on the bottom of my shopify store looks perfect match on the desktop. However, there are a wide empace space on mobile view, even I tried use different size of pics, the white area was still there. Is there any solution to make banner photo fully capture the area? (I am using Dawn Theme)
Thanks
Hello! I’ve actually dealt with this exact issue before on the Dawn theme, especially that annoying white space under the banner on mobile. It usually has to do with how the image scaling works based on the section’s default aspect ratio.
There’s a small CSS fix I normally apply that helps, but just to be sure I give you the right version…
Hi @kyle6661
That white space issue on mobile can sometimes be caused by image aspect ratios or how the section settings are configured in the Dawn theme.
To better understand what’s going on and provide you with the most accurate solution, could you please share your store URL? That way, I can take a closer look at how the banner is rendering and guide you accordingly.
Looking forward to helping you fix it!
Best,
Elijah.
Hi @kyle6661
Please turn off the option “Show container on mobile” of your Image banner section to remove that space
Hi Dan. The container option was off, but the white space is still there.
Hi Elijah. The website URL is www.singoau.com. Thanks
Hello Global. Do you still have the CSS codes to fix the issue? Thanks
Could you share the link to your page?
Hi Elijah.
I just figure out I was use “Slide show” as a banner; I am not sure if “Slide show” could be use as a banner or not; But after I create another banner on the bottom, It seams the white space is gone:)
It shows like that
Hello @kyle6661 You’re encountering a common issue in the Dawn theme where banner sections (like “Image with Text”, “Image Banner”, or custom image blocks) have inconsistent padding or aspect ratios between desktop and mobile views. Here’s how to fix the white empty space below the banner image on mobile:
Problem Summary
. On desktop, the image fills the block nicely.
. On mobile, Shopify’s Dawn theme often preserves a fixed aspect ratio, causing the image to not fully fill the area vertically.
. This results in a white/empty space below the image.
Solutions
Option 1: Use “Image banner” block with Mobile height adjustment
.1 Go to Online Store > Themes > Customize.
.2 Find the section where your banner image is.
.3 Click on the Image banner block.
.4 In the settings panel:
. Scroll to “Image height”.
. Set Mobile layout height to “Adapt to image” instead of fixed height like “Small” or “Medium”.
This setting forces the image height to match the actual image rather than maintaining a forced aspect ratio, which is the usual cause of the space.
Option 2: Override mobile banner height with CSS
If you’re not using the “Image banner” section or that doesn’t solve it, you can use custom CSS:
Go to Online Store > Themes > Edit code.
In the Assets folder, open base.css.
Add this code at the bottom:
@media screen and (max-width: 749px) {
.banner, .image-banner, .media, .media--adapt {
height: auto !important;
min-height: unset !important;
}
.banner__media, .media--adapt img {
object-fit: cover !important;
height: auto !important;
}
}
This will:
. Remove any forced height on the mobile version.
. Allow the image to take up space based on its natural size.
. Prevent extra white space.
Final Tip: Use properly cropped images
Make sure your image has:
. A mobile-friendly aspect ratio (3:4 or 4:5, not super wide).
. Good resolution for mobile screens (around 800px wide minimum).
Thank you 