my store is showing half images in mobile but it is perfect in desktop. Please help me how to get the perfect sizes for each one???
Hi @sayedsami ,
Kindly share your website URL.
www.babiesrlove.com this is my website. Please solve this,would be a big help
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
-Go to Online Store->Theme->Edit code
-Asset-> ->base.css paste the below code at the bottom of the file.
@media (max-width:767px){
#shopify-section-template–14452246741069__slideshow .slideshow__slide.grid__item .slideshow__media > img{
object-fit: contain !important;
background: white !important;
}
#shopify-section-template–14452246741069__slideshow .slideshow__slide.grid__item .slideshow__text-wrapper{
min-height:20rem !important
}
}
Best Regards;
Pagefly
Thanks alot,it helped. But the images down below are still showing half. Upper half has been changed but lower half is still the same
you can add
@media (max-width:767px){
#Banner-template–14452246741069__16630851542f554c29 .banner__media.media{min-height:20rem !important;
height:20rem !important}
#Banner-template–14452246741069__16630851542f554c29 .banner__media.media img{
object-fit: contain !important;
background:white !important
}
}
I just added below it but it didnt change anything.Any other solution?
