Change aspect ratio of background image on mobile only

Site URL: https://sphere-bassoon-s7rj.squarespace.com/home-2

I would like specific background images to display as horizontal images vs vertical on mobile in the aspect ratio that I want (4:3). 

https://sphere-bassoon-s7rj.squarespace.com/home-2

PW: kirankiran

Thank you!

23 minutes ago, Ekin said:

Site URL: https://sphere-bassoon-s7rj.squarespace.com/home-2

I would like specific background images to display as horizontal images vs vertical on mobile in the aspect ratio that I want (4:3). 

https://sphere-bassoon-s7rj.squarespace.com/home-2

PW: kirankiran

Thank you!

Do you mean each device will have specific images with different ratio based on devices?

17 minutes ago, bangank36 said:

Do you mean each device will have specific images with different ratio based on devices?

Just on mobile, I would like background images to display at an assigned aspect ratio. Basically I'm trying to avoid how squarespace auto crops the horizontal desktop background images as vertical on mobile.

8 hours ago, Ekin said:

Site URL: https://sphere-bassoon-s7rj.squarespace.com/home-2

I would like specific background images to display as horizontal images vs vertical on mobile in the aspect ratio that I want (4:3). 

https://sphere-bassoon-s7rj.squarespace.com/home-2

PW: kirankiran

Thank you!

You mean top image?

14 hours ago, tuanphan said:

You mean top image?

Top image (where currently there is a video), and also the background image further down, attached here.

10 hours ago, Ekin said:

Top image (where currently there is a video), and also the background image further down, attached here.

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #collection-61d87d55ed956d1ffd8474f1 section.background-width--full-bleed { 
    min-height: 32vh !important;
  }
}

Let me know how it works

17 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #collection-61d87d55ed956d1ffd8474f1 section.background-width--full-bleed { 
    min-height: 32vh !important;
  }
}

Let me know how it works

Thank you this works great!!!
Is it possible to apply this to certain sections only instead of all of the background images on the page? I noticed when I increase the vh value, there is extra padding that gets added under the images on the mobile version of Reel Slideshow when I enter this code and would like to avoid that. Here is screenshot for reference.

11 hours ago, Ekin said:

Thank you this works great!!!
Is it possible to apply this to certain sections only instead of all of the background images on the page? I noticed when I increase the vh value, there is extra padding that gets added under the images on the mobile version of Reel Slideshow when I enter this code and would like to avoid that. Here is screenshot for reference.

Yes we can apply this code to a specific section by adding section id to my code. It could help you set style only for the selector

10 hours ago, bangank36 said:

Yes we can apply this code to a specific section by adding section id to my code. It could help you set style only for the selector

That would be great, thank you! I don't have coding background and it would help a lot if you could give me the code to paste in. Appreciate it!