Venture Theme - hero image size on mobile

[danielshub]

I have a website with using the Venture Theme and that has a hero image. The hero image looks like this: https://ibb.co/FDnGRwN. I have added this to my theme.scss file to adjust the image for mobile screens:

@media (max-width: 768px){ 
	.hero__image {
    		object-fit: fill !important;
	}
}

 However, the image on mobile currently looks like this: https://ibb.co/h2z3dh4 as you can see it is squished and distorted. How do I fix this? Please help.

[Pallavi]

Hello Daniel,

Kindly apply the below given css and check once. This might help you to resolve the issue 

@media (max-width: 768px){ 

.hero__image {

    object-fit: fill !important;

}

}

[OpenThinking]

That's because you're using object-fit: fill; 

Try using contain or cover instead.

• object-fit: contain - The content is scaled to maintain its aspect ratio while fitting within the element's content box
• object-fit: cover - The content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.

If this helped your please accept my answer and give me thumbs up!

[danielshub]

Both of these turn out weird. Cover makes the image cropped and contain makes the image too small, but the image is the right width... is there another way? 

[OpenThinking]

If you provide a link to your website I can take a better look and let you know.

[danielshub]

@OpenThinking I sent you a message with the store url and password

[OpenThinking]

I kinda understand what you're trying to achieve but.. Since you don't want to stretch the image nor crop it... you can't have it to fit the whole height so must be height:auto.

@media (max-width: 768px){ 
.hero__image {
	height:auto !important;
	width:100% !important;
	object-fit:contain !important;
}

.shopify-section--slideshow:first-child .hero-wrapper {
    margin-top: -94px !important;
    margin-bottom: -64px !important;
}
}

[danielshub]

@OpenThinking should I add your code to the bottom of theme.scss?

[OpenThinking]

Yes, very bottom.

If this helps you out, please accept my answer and give thumbs up! thanks

[danielshub]

@OpenThinking So I added your code... and it gave me this:

So I tried playing around with the `margin-top` and `margin-bottom` values and I got the right numbers. However, whilst it worked perfectly for most types of mobiles, on the iPad and when the phone is rotates to horizontal view, it looks like this. Do you know how to make it so your code applies only for mobile view, but for iPad and horizontal view, your code snipped doesn't apply at all?

: