Venture Theme - adapt header image for mobile

[danielshub]

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?

[AlexEffron]

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

[danielshub]

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

[AlexEffron]

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

[danielshub]

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

[danielshub]

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

[AlexEffron]

I said you to use 

object-fit: contain;

 instead of object-fit: fill !important;

On my side, it is showing right output

[carlinkit]

I added this code here according to your tutorial, but nothing happens. Can you help me?please

[AlexEffron]

object-fit: contain !important;

[ArtMM]

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