ondrejdesigns Posted February 7 Share Posted February 7 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 Link to comment
tuanphan Posted February 10 Share Posted February 10 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; } } ondrejdesigns 1 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
ondrejdesigns Posted February 22 Author Share Posted February 22 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
tuanphan Posted July 25 Share Posted July 25 If you still need help, use this CSS code .gallery-slideshow { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment