Header banner image not displaying on mobile view in Studio 10.0

Store Design
1

I just updated to Studio 10.0 theme, and was finally able to get the image banner we designed uploaded into our header. The problem is that now the beautiful header banner only shows on desktop-on mobile all you can see is our logo! I’ve tried several coding fixes for the previous version of Studio, as well as a few other themes that did nothing. I’m ready to pull my hair out! All I want is for the header banner to show on mobile view/tablet view the same way it does on desktop view.

our site is www.twmerc.com

1 Like
2

Hi @Timberwolf

You need to add the background to cover the whole container. You did assign your background to min-width 990px so it will not show on mobile

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
header.header.header--mobile-center {
    background: url(https://cdn.shopify.com/s/files/1/0745/4045/0093/files/Mercantile_Website_Banner_5.png?v=1688506808) no-repeat;
    background-position: center;
    object-fit: cover;
    background-size: cover;
}

Please see result here:

Since your highlighted width is wide, it pushes the logo to the left side. I would suggest to be mindful on the items and make sure they respond well with device change.

made4Uo_0-1688589720960.png
made4Uo_0-1688589720960.png1199×833 216 KB

This is mobile:

made4Uo_1-1688589955898.png
made4Uo_1-1688589955898.png691×903 284 KB

1 Like
3

Would I have to set a different view option for mobile vs desktop? The off center view of the logo is what drove me crazy when initially trying to get this banner in place.

4

Nope. The code provided should work but you need to change “US | United States to make it short”

1 Like
5

This worked great!! Thank you! I’ve been pulling my hair out for weeks!