Hero Image on Mobile - Asking for CSS for correct size.

Site URL: https://www.creativebloomrocks.com/

Hi there, 

On our homepage, we currently have an image that has burned in text. 

When viewing on mobile, it crops this and therefore the text is not legible. 

Can anyone help suggest some code which allow the banner to appear full size on mobile and therefore not cropped. 

Thanks very much, Ollie

1 hour ago, CreativeBloom said:

Site URL: https://www.creativebloomrocks.com/

Hi there, 

On our homepage, we currently have an image that has burned in text. 

When viewing on mobile, it crops this and therefore the text is not legible. 

Can anyone help suggest some code which allow the banner to appear full size on mobile and therefore not cropped. 

 

Thanks very much, Ollie

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
  }
  .banner-thumbnail-wrapper {
    padding: 0 !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

Hi Bangank36, 

Thanks for getting back to me so quickly - appreciate this very much,

What i'm seeing after putting this code in the CSS is that the hero banner is removed completely and disappears on Mobile. Still present on desktop. 

Have cleared my cache and still doesn't show on mobile. 

Ollie

8 minutes ago, CreativeBloom said:

Hi Bangank36, 

Thanks for getting back to me so quickly - appreciate this very much,

What i'm seeing after putting this code in the CSS is that the hero banner is removed completely and disappears on Mobile. Still present on desktop. 

Have cleared my cache and still doesn't show on mobile. 

Ollie

The banner image is fine from my end. You try checking again

10 minutes ago, CreativeBloom said:

Hi Bangank36, 

Thanks for getting back to me so quickly - appreciate this very much,

What i'm seeing after putting this code in the CSS is that the hero banner is removed completely and disappears on Mobile. Still present on desktop. 

Have cleared my cache and still doesn't show on mobile. 

Ollie

I access your site via my phone and it seems fine

C

Can you check it again?

I think maybe my screen size could be a little smaller and therefore it's not showing. 

I have an Iphone 12 and my colleague isn't able to see it either. 

Thanks for your help on this again

Ollie