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
Hi @naturalflow , can you share the screenshot of the issue you are facing?
Thanks!
Hello @naturalflow
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
@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;
}
}
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thank you for your reply! I have added photos for reference. The top is the mobile view, while the bottom is the desktop view,
