Jump to content

Banner Slideshow Mobile Image Padding

Go to solution Solved by Ziggy,

Recommended Posts

I am looking to add padding around these Banner Slideshow slides on mobile with CSS , and I can't seem to figure it out!  Attached below I provided images of how it look.

Mobile

s.Screenshot2024-05-01at11_47_25AM.thumb.png.83173451dee31e516133c59a7f054ec5.png

 

 

Desktop

 

Screenshot2024-05-01at11_49_53AM.thumb.png.4f6a3aca418313be0ce8be4477c871cf.png

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Try this in Custom CSS:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 8px;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 minutes ago, Ziggy said:

Try this in Custom CSS:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 8px;
  }
}

Thank you for your response! The margin shows up in the editing window but not on an actual mobile device. This was the issue I was having.

 

While Editing

Screenshot2024-05-01at12_45_08PM.thumb.png.5eb6c8e5c33e0aee6bd9730f10b02ae3.png

 

On Device

 

IMG_60A793194F9B-1.thumb.jpeg.f2486605394048a776cbc794eef51c32.jpeg

Link to comment

The CSS doesn't appear to have been saved as I can't see it in the code on your website, did you remove it?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)
3 hours ago, Ziggy said:

The CSS doesn't appear to have been saved as I can't see it in the code on your website, did you remove it?

I added it back. Let me know what you see.

Edited by Knoxx
Link to comment

Hmm, not sure why that wasn't excluding the other elements, try one of these:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slides {
    width: 98%;
  }
}

Or this:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 24px;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 minutes ago, Ziggy said:

Hmm, not sure why that wasn't excluding the other elements, try one of these:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slides {
    width: 98%;
  }
}

Or this:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 24px;
  }
}

Yeah, it's the same result. When I include IMG it created the margin but the images are clipped.

Link to comment

Do you have any other style code that might be overriding these tweaks?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
43 minutes ago, Ziggy said:

Do you have any other style code that might be overriding these tweaks?

Thank you! That seemed to work. I subtracted all code and implemented what you suggested.

While Editing and Mobile

Screenshot2024-05-02at7_58_14AM.thumb.png.ef138ba0c51c1be88c9468e1736c3e02.png

 

Thank you for your assistance!

 

Link to comment
1 hour ago, Ziggy said:

Do you have any other style code that might be overriding these tweaks?

One last thing, do you happen to know the code to be able to change the height for Banner Slideshow for mobile?

Link to comment

Can you mark my post as the solution and give it a like?

Try this CSS:

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Knoxx said:

Thank you!

Pleased to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.