Venture Theme - adapt header image for mobile

Highlighted
Tourist
16 0 2

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?

0 Likes
Highlighted
Shopify Partner
591 84 127

Please provide website url and if your store is password protected then also provide password

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Tourist
16 0 2

@paramSoft As I cannot share it publicly, I have sent you a message with the store url as well as the password.

0 Likes
Highlighted
Shopify Partner
591 84 127

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;
}
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Tourist
16 0 2

@paramSoft I tried this and I this is still the view on my iPhone 8 screen: https://ibb.co/B3wfsW5 

0 Likes
Highlighted
Tourist
16 0 2

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;
	}
}

 

0 Likes
Highlighted
Shopify Partner
591 84 127

I said you to use 

object-fit: contain;

 instead of object-fit: fill !important;

On my side, it is showing right output

 
 
 
 

paramSoft_0-1603886917063.png

 

 

 

 

 

 

 

 

 

 

 
 
 
 

 

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes