Re: Shopify Store Banner Cropped on Mobile using Dawn Theme

Solved

Shopify Store Banner Cropped on Mobile using Dawn Theme

Macnet
Excursionist
23 1 9

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

Accepted Solution (1)

AcidPi
Shopify Partner
60 14 16

This is an 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
    Desktop Capture1.PNG
    Mobile Layout
    Show container on mobile = True (checked) < this is up to youMobile Capture2.PNG

Regards

View solution in original post

Replies 2 (2)

AcidPi
Shopify Partner
60 14 16

This is an 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
    Desktop Capture1.PNG
    Mobile Layout
    Show container on mobile = True (checked) < this is up to youMobile Capture2.PNG

Regards

Macnet
Excursionist
23 1 9

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