Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Change aspect ratio of background image on mobile only


Ekin

Question

8 answers to this question

Recommended Posts

  • 1
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.

Screen Shot 2022-01-09 at 5.42.05 PM.png

Link to comment
  • 0
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?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
10 hours ago, Ekin said:

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

Screen Shot 2022-01-08 at 1.54.53 PM.png

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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.

Screen Shot 2022-01-09 at 5.42.05 PM.png

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...