Jump to content

Banner Slideshow Cropping Issue

Go to solution Solved by tuanphan,

Recommended Posts

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. 

 

Link to comment

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

 

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!)

Link to comment

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?

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

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

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

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.