Venture Theme - hero image size on mobile

Highlighted
Tourist
16 0 2

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.

0 Likes
Highlighted
Shopify Expert
423 43 47

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Highlighted

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!

 

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
16 0 2

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? 

0 Likes
Highlighted

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

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
16 0 2

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

0 Likes
Highlighted

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

 

 

 

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
16 0 2

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

0 Likes
Highlighted

Yes, very bottom.

 

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

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
16 0 2

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

Screen Shot 2020-10-29 at 7.42.21 am.jpg

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?

:Screen Shot 2020-10-29 at 7.45.19 am.jpg

0 Likes