How to fix image banner on phone, text shows up underneath as a white blank space!

[sidenkompaniet]

How to fix image banner on phone, text shows up underneath as a white blank space!

[theycallmemakka]

Hi @sidenkompaniet ,

Can you provide link to the store?

[BSSCommerce-B2B · Accepted solution]

@sidenkompaniet,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (max-width: 768px) {
 #Banner-template--21320535867724__image_banner_C3Wxdi .banner__box {
    position: absolute;
    background: transparent;
    transform: translateY(-50%);
  }    
}
</style>

Result

If it helps you, please like and mark it as the solution.

Best Regards 😊

[sidenkompaniet]

Thank you so much that worked but i also have the same issue on these sides when im using the same thing! Could you help me fix those ones as well? https://4d61f0-d9.myshopify.com/collections/understall 

https://4d61f0-d9.myshopify.com/collections/understall-herr

https://4d61f0-d9.myshopify.com/collections/sova

[BSSCommerce-B2B]

@sidenkompaniet, change the previous code like this

<style>
@media screen and (max-width: 768px) {
 #Banner-template--21320535867724__image_banner_C3Wxdi .banner__box {
    position: absolute;
    background: transparent;
    transform: translateY(-50%);
 }    
 #Banner-template--21320535867724__image_banner_C3Wxdi .banner__box,
 #Banner-template--22173801808204__image_banner_fjJCfy .banner__box {
    background: #000;
 }
}
</style>

Result:

[sidenkompaniet]

Is it not possible to have it on top of the photo?😊😊😊

[BSSCommerce-B2B]

@sidenkompaniet, your text is too long so it will exceed the image 🙂

[sidenkompaniet]

Thank you! When i do this the first one changes sp its black on half of the image! Is it possible to make the first one with the text on top and then the second one with it underneath (as the text is to long)?