Jump to content

Banner Slideshow Cropping Issue

Go to solution Solved by tuanphan,

Recommended Posts

Posted

I have a section with a Banner Slideshow at the top of the homepage. I have enabled Full Bleed, vertical padding is S, no infinite scroll and I have messed with the minimum height settings ad infinitum. All I want is for the banner to always remain the same ratio. I don't want Squarespace to scale it dynamically. Otherwise I can optimize either for mobile or desktop, and even then depending on the size of the window, key parts of the images get cropped. How can I set this to remain static?


https://owl-sepia-z53p.squarespace.com/

Thanks so so very much for the help! Spend a couple of hours and realized this is above my level of comprehension. 

 

Posted

Thanks Tuanphan — it seems to make mobile better for sure, but the image still doesn't retain its full height when I maximize my browser screen on desktop. Is there a way to just remove any dynamic sizing completely? So it's always the same, shows up in full regardless of screensize?

Posted (edited)

This is the thing I am also trying to avoid — in the screenshot, the entire top of the image with the sky just gets lost. Maybe there's some way to limit this and still keep the mobile code intact? THANK YOU!

Screen Shot 2024-06-10 at 9.13.05 AM.png

Edited by undefined
Posted
On 6/10/2024 at 8:14 PM, undefined said:

This is the thing I am also trying to avoid — in the screenshot, the entire top of the image with the sky just gets lost. Maybe there's some way to limit this and still keep the mobile code intact? THANK YOU!

Screen Shot 2024-06-10 at 9.13.05 AM.png

I think you try increase height of slideshow on desktop.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Right, but once I increase it on desktop, it screws up mobile. Seems like there's no way to have a "keep proportions intact" option?

  • Solution
Posted
On 6/10/2024 at 5:10 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS to resize it on mobile.

@media screen and (max-width:1024px) {
.user-items-list-item-container[data-section-id="65ef1e9d2b847d094ab7ee12"] ul {
    min-height: unset !important;
}
}

 

You can increase on desktop then use this code to resize it on mobile

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

THANK YOU! That did it. I really can't understand why these settings can't just be part of the UI in Squarespace. They overcomplicated 7.1 so much, yet basic stuff is still missing 😂 Just IMHO..... 

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.