Shopify themes, liquid, logos, and UX
Hi there,
I have a slideshow image on my store that uses the Venture theme, however the image does not fit the screen on iPhone. The image currently looks like this on my store: https://ibb.co/FDnGRwN and it looks like this on mobile: https://ibb.co/JjSLTFK
As you can see, on the mobile the image is cropped for some reason. I have tried going into theme settings on the image and changing Slide Height to "adapt to first image" which makes it full size on the iPhone, however adds a white border around the sides like this: https://ibb.co/LChWLdK
Basically, I want the image to remain the same on the desktop, but show the full size of the image on the mobile. Does anyone know how to help me?
Please provide website url and if your store is password protected then also provide password
@AlexEffron As I cannot share it publicly, I have sent you a message with the store url as well as the password.
please place this code at the end of theme.scss
@media only screen and (min-width: 750px) {
.hero {
height: 100%;
}
.hero__image {
object-fit: contain;
}
}
@AlexEffron I tried this and I this is still the view on my iPhone 8 screen: https://ibb.co/B3wfsW5
Hi,
I added this line of code at the end of my theme.scss.liquid. My banners are still cut-off on mobile devices. I have it set up as a slideshow, not sure if that makes any difference?
@media only screen and (min-width: 750px) { .hero { height: 100%; } .hero__image { object-fit: contain; } }
Thanks,
Art
I tried adding this to the theme.scss file and it worked, however the image is quite distorted on the mobile now. Here is a screenshot: https://ibb.co/h2z3dh4
@media (max-width: 768px){
.hero__image {
object-fit: fill !important;
}
}
I said you to use
object-fit: contain;
instead of object-fit: fill !important;
On my side, it is showing right output
I added this code here according to your tutorial, but nothing happens. Can you help me?please
object-fit: contain !important;
User | RANK |
---|---|
61 | |
53 | |
47 | |
42 | |
39 |
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023