Jump to content

Slideshow Full-Width inside the Grid / Mobile Padding

Recommended Posts

Hi Squarespace-Folk,

I am having a problem with the slide-show gallery on desktop and mobile screens (attached screenshots).

1. Desktop
I would like to have the slideshow full-width inside the website grid keeping the original picture ratio 4:3.
In the attached screenshot you see the green box with the outside padding and the blue box with the picture with some padding on the right and left. I was trying to remove it, but I wasn't able to find where to find it. When I found some code with 100% width injected code, the picture was cropped at the bottom.

2. Mobile
On mobile screens on the other hand I have a problem with a too big padding between the picture and the picture description (blue box). And there is some additional padding (orange box) which I can't remove there. Desktop it looks fine.

Could you please help me?

Link: https://chihuahua-sprout-azlt.squarespace.com/
pw: helloworld

Many thanks!

Ondrej

 

Screenshot 2023-02-07 at 11.35.37.png

Screenshot 2023-02-04 at 19.46.12.png

Link to comment

Hi,

Edit this code

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        padding-bottom: 0
    }
}

to this

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        margin-bottom: 0 !important;
    }
}

 

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
  • 2 weeks later...
On 2/10/2023 at 10:32 AM, tuanphan said:

Hi,

Edit this code

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        padding-bottom: 0
    }
}

to this

@media screen and (max-width: 767px) {
    .homepage .gallery-slideshow {
        height:40vh !important;
        padding-top: 0;
        margin-bottom: 0 !important;
    }
}

 

Many thanks! Mobile it looks very nice! 

Do you have any idea how to change the width of the gallery on desktop as in my screenshot above?

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.