How can I force the text to be on top of the image (Image with Text) on mobile? *Craft theme*

[dealeroffruit]

I can choose the orientation on desktop, but it is not possible on mobile.

Thank you!

[Moeed]

Hey @dealeroffruit 

Share your store URL and Password if enabled.

Best Regards,

Moeed

[Michael-Thomas]

Hi @dealeroffruit 

Try adding this CSS. But please note, if you have a lot of text, it's not going to work well so having the text below image would be the best to ensure readability on most mobile devices.

@media (max-width:767px) {
  .image-with-text__grid { position:relative; min-height:200px; }
  .image-with-text__media-item { position:static!important; }
  .image-with-text__text-item { 
    position:absolute!important; 
    inset:15px;
    z-index:2; 
    padding:15px;
    background:rgba(0,0,0,0.05); /* 5% dark overlay */
    backdrop-filter:brightness(1.05); /* Optional subtle lightening */
  }
  .image-with-text__media { position:relative!important; height:100%; }
}

Hope that helps. 

[dealeroffruit]

thank you for your reply

unfortunately this is how it looks on mobile 😞 unfortunately blocking the whole image