Image with Text Overlay is cut off on mobile (Using Fashionopolism theme)

[naturalflow]

I'm currently using the Fashionopolism theme to create an online shop for my company. When I use the Image with Text Overlay section, the image looks fine on desktop/full screen, but gets cut off when using mobile. This affects my homepage's Slideshow section as well.

Could anyone help me figure out how to get the image to work with both desktop and mobile? When using Image with Text Overlay, there is no option to upload a Mobile Image, so I'm not sure what I can do.

https://j-beautynatural.com/collections/aqua-aqua-autumn-winter-collection

Password: nflow001

[websensepro]

Hi @naturalflow , can you share the screenshot of the issue you are facing?

Thanks!

[naturalflow]

Thank you for your reply! I have added photos for reference. The top is the mobile view, while the bottom is the desktop view,

[Tech_Coding]

Hello @naturalflow 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .parallax .simpleParallax.simple-parallax-initialized img, .slideshow-section .slideshow.is-fixed_height .slideshow__slide .box-ratio img {
      object-fit: contain !important;
    }

    .parallax-template--17730144305407__image-with-text-overlay .box-ratio img {
         height: 272px !important;
         min-height: 272px !important;
     }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.