7.1 Slideshow Gallery Section Mobile Resize

Site URL: https://www.mymanagr.com/

Hello,

I am working on a website in Squarespace 7.1 (www.mymanagr.com) (PW: mike123) and am looking for help regarding section two on the homepage with the gallery slideshow. The slideshow image on mobile and tablet has tons of extra space above and below it. I need the section height and width to remain large on web so the image is big, but need to change the height and width to small on mobile and tablet so there isn't so much space. Is this possible to do with custom code?

Thanks in advance. 

Add to Home > design > custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e8c8d8b17a9377ba00c6bf3"] {
    height: 40vh !important;
}
}

@tuanphan Thank you so much for all your help!

6 minutes ago, OliviaM said:

@tuanphan Thank you so much for all your help!

You solved on tablet?

Hi!

I have the same issue and don't manage to make it work even with your code. (I changed the data-section-id of course).
In a general manner, is there a way to change the design of the slideshow when we are on mobile version and turn it into a grid for example?

Thank you in advance!
 

5 hours ago, eleonored said:

Hi!

I have the same issue and don't manage to make it work even with your code. (I changed the data-section-id of course).
In a general manner, is there a way to change the design of the slideshow when we are on mobile version and turn it into a grid for example?

Thank you in advance

 

Can you share link to page in screenshot?

On 4/18/2020 at 12:25 AM, tuanphan said:

Can you share link to page in screenshot?

Hi, https://chihuahua-sunflower-dckd.squarespace.com/config/ 
Thanks

6 minutes ago, eleonored said:

Hi, https://chihuahua-sunflower-dckd.squarespace.com/config/ 
Thanks

Hi, /config is url for site owner.

Can you share link to exact page in screenshot?

1 hour ago, tuanphan said:

Hi, /config is url for site owner.

Can you share link to exact page in screenshot?

oh sorry 

https://chihuahua-sunflower-dckd.squarespace.com/talents

43 minutes ago, eleonored said:

oh sorry 

https://chihuahua-sunflower-dckd.squarespace.com/talents

@media screen and (max-width:767px) {
[data-section-id="5e6f3ce521ba4c55435a0a05"] {
    height: 40vh;
}
}

1 hour ago, tuanphan said:

@media screen and (max-width:767px) {
[data-section-id="5e6f3ce521ba4c55435a0a05"] {
    height: 40vh;
}
}

 

Thank you so much!!!!

We wanted some easier slideshow options from SS 7.1 as well...we created some here: https://www.squareaddons.com/shop 

• The "Gallery Slider with Content Overlay" Add-on will allow you to achieve a full bleed banner slideshow with text overlay.
• The "Slideshow" Add-on will give you an in-page gallery/slideshow content block. 

Give them a go! Would love to hear your feedback once you do. 

Thank you, 
Kate

Hi there -

I'm having the same issue with the height of my galleries - way too much space above and below on mobile version. 

I used the code and was able to reduce the space above but I'm still having issues with the spacing below. Any help would be appreciated! 

Thanks in advance! 

17 hours ago, JessScarcella said:

Hi there -

I'm having the same issue with the height of my galleries - way too much space above and below on mobile version. 

I used the code and was able to reduce the space above but I'm still having issues with the spacing below. Any help would be appreciated! 

Thanks in advance! 

Can you share link to page in screenshot? We can check easier.

On 8/20/2020 at 7:33 AM, tuanphan said:

Can you share link to page in screenshot? We can check easier.

https://www.ivyandjenna.com/

I'm having a similar problem. I've created a autoplaying reel at the bottom of one of my clients pages. However, on mobile the pictures do not re-size. The code above simply crops the images and cuts them off?

23 hours ago, JessScarcella said:

https://www.ivyandjenna.com/

Did you solve? See fine here.

21 hours ago, BridgetQuinn said:

I'm having a similar problem. I've created a autoplaying reel at the bottom of one of my clients pages. However, on mobile the pictures do not re-size. The code above simply crops the images and cuts them off?

Can you share site url?

Hi @tuanphan,

Thanks so much for all the advice you have been giving us! I'm actually having the same issues as BridgetQuinn where when i applied the code, the pictures do not resize and it only crops the image. It is also an autoplay, slideshow:full bleed section.

Link to the page in question: https://www.alchemist.com.sg/home-1

Would greatly appreciate if you can have a look at it. Thanks for your help!

On 10/3/2020 at 3:54 PM, erwincxy said:

Hi @tuanphan,

Thanks so much for all the advice you have been giving us! I'm actually having the same issues as BridgetQuinn where when i applied the code, the pictures do not resize and it only crops the image. It is also an autoplay, slideshow:full bleed section.

Link to the page in question: https://www.alchemist.com.sg/home-1Would greatly appreciate if you can have a look at it. Thanks for your help!

 

Can you disable autoplay? We can check easier.

18 hours ago, tuanphan said:

Can you disable autoplay? We can check easier.

Have disabled autoplay!

4 hours ago, erwincxy said:

Have disabled autoplay!

Remove code you used, add new code

@media screen and (max-width:767px) {
[data-section-id="5f7421ea0f6f7324ac3890f4"] {
    height: 40vh !important;
}
}

19 hours ago, tuanphan said:

Remove code you used, add new code

@media screen and (max-width:767px) {
[data-section-id="5f7421ea0f6f7324ac3890f4"] {
    height: 40vh !important;
}
}

 

This is great! Thanks for the help!

On 9/25/2020 at 10:12 AM, tuanphan said:

Did you solve? See fine here.

Can you share site url?

Not solved yet 😔 and I'm having the same issue with 2 other sites I'm working on. Still a large amount of space on mobile view. 

Hello I am having the same issue. My website is www.rainyroofquotes.co.nz. Could anyone help me please?

On 10/9/2020 at 12:38 AM, rainyroofquotes said:

Hello I am having the same issue. My website is www.rainyroofquotes.co.nz. Could anyone help me please?

Add to Home > Design > Custom CSS

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