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
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;
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
User | RANK |
---|---|
129 | |
94 | |
77 | |
70 | |
40 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022