Shopify Store Banner Cropped on Mobile using Dawn Theme

[Macnet]

Hi,

I have two Shopify stores and both are using Dawn theme version 9. The home page banner in one store is fully visible on mobile. However, the home page banner in the other store (which I am currently building) is cropped when viewed on mobile. Even though I am presently using identical banners on both stores, the cropping issue remains.

One store sells gift items. This is the store in which the banner is fully visible on mobile:
Silky Gift Shop: https://silkygiftshop.com/

With the other store (which I am currently building), the banner is cropped on mobile even though I'm currently using the same banner from the other store:
Silky Cake Toppers: https://silkycaketoppers.co.uk/

So to summarise, the cropping of the banner on mobile occurs only on the Silky Cake Toppers store, even though I am currently using the same banner for both stores to compare mobile visibility.

As I mentioned earlier, both stores are using the same Dawn theme and the same version 9. Any suggestions on how to rectify the cropping issue on the Silky Cake Toppers store would be greatly appreciated.

Mac

[AcidPi · Accepted solution]

Hi,

The issue is the heading content in your banner "Celebrate in style! Browse our most popular cake toppers" and Possibly Image Banner Settings.

If the content is not required like on silkygiftshop.com the quick option is to hide/remove said content.
However if content is required you could try the following.

Add some custom CSS to reduce the size of header in the mobile view or try this below no CSS required.

Go to your theme editor
Under Template - Image Banner

1. Hide Heading
2. Add Block - Text
3. Update Text Block to have "Celebrate in style! Browse our most popular cake toppers"
4. Move Text Block to be above Button Block
5. Check/Update the following Image Banner settings
   Banner height = Adapt to first Image
   Desktop content position = Middle Center < this is up to you
   Show container on desktop = True (checked) < this is up to you
   
   Mobile Layout
   Show container on mobile = True (checked) < this is up to you

Regards

[Macnet]

Hi

I removed the heading content in my banner ("Celebrate in style! Browse our most popular cake toppers") as you advised. This alone fixed the cropping issue. Thank you for your assistance - very much appreciated.

Mac