Jump to content

Reduce Carousel Spacing On Mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I've had a look around but cant find what I'm looking for.

I need a code that reduces (even better gives me control of) the margins around the simple slideshow, both on mobile and standard web page. The space around the mobile version is far too big! See attached image

Thanks!

 

Edited by Alex2024
dont want the image public
Link to comment
  • Replies 13
  • Views 784
  • Created
  • Last Reply

Top Posters In This Topic

17 hours ago, Alex2024 said:

https://flute-point-sh7n.squarespace.com/

 

The website private, how do i give you access without publicly giving my details?

The simple slideshow is the only one that displays the whole image like this. Theres so much empty space around it Id like to reduce

You can follow this

 

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

To reduce spacing on mobile, try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-slideshow {
    padding: 2px !important;
    min-height: unset !important;
    height: 80vw !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
3 hours ago, tuanphan said:
@media screen and (max-width:767px) {
body.homepage .gallery-slideshow {
    padding: 2px !important;
    min-height: unset !important;
    height: 80vw !important;
}
}

This worked! Thanks so much! 🙂

Link to comment
5 hours ago, tuanphan said:

To reduce spacing on mobile, try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-slideshow {
    padding: 2px !important;
    min-height: unset !important;
    height: 80vw !important;
}
}

 

Is there a way to control the boarders like this on desktop version?

Link to comment
9 hours ago, Alex2024 said:

No, I want less blank space around it, like you did for the mobile version. 

Control over the amount of space would be amazing

You try this CSS code

@media screen and (min-width:768px) {
body.homepage .gallery-slideshow {
    max-width: 99% !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

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.