Venture Theme - adapt header image for mobile

danielshub
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?

Replies 9 (9)
AlexEffron
Shopify Partner
2468 387 1038

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

danielshub
Tourist
16 0 2

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

AlexEffron
Shopify Partner
2468 387 1038

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
Tourist
16 0 2

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

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

 

AlexEffron
Shopify Partner
2468 387 1038

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

 

 

 

 

 

 

 

 

 

 

 
 
 
 

 

 

carlinkit
New Member
1 0 0

carlinkit_0-1610504145645.pngI added this code here according to your tutorial, but nothing happens. Can you help me?please

 

ArtMM
New Member
2 0 0

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