Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

7.1 Slideshow Gallery Section Mobile Resize


OliviaM

Question

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. 

Screen Shot 2020-04-07 at 9.34.11 AM.png

Screen Shot 2020-04-07 at 11.14.17 AM.png

Link to post
  • Answers 43
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

Recommended Posts

  • 1
11 hours ago, ibisette said:

I have the same problem. Disabled my autoplay on https://ibisette.squarespace.com/config/pages
massive blank spaces up and below my gallery on mobile. 

desperate for help, none of the above codes did it for me 

Where is slideshow? /config is admin url.

 

On 10/26/2020 at 5:02 PM, 8FOOT3 said:

Sure - autoplay has been deactivated

Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#reviews2 .Index-gallery-wrapper, section#reviews2 .Index-gallery-item {
    height: 60vh !important;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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!
 

 

Screenshot 2020-04-17 at 19.18.00.png

Screenshot 2020-04-17 at 19.22.51.png

Link to post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
1 hour ago, tuanphan said:

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

 

Thank you so much!!!!

 

Link to post
  • 0

We wanted some easier slideshow options from SS 7.1 as well...we created some herehttps://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

+ Customize the look of.png

If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! 

Link to post
  • 0

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! 

 

 

Screen Shot 2020-08-19 at 2.14.35 PM.png

Edited by JessScarcella
Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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?

Link to post
  • 0
23 hours ago, JessScarcella said:

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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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

110015122_Screenshot2020-10-03at4_53_22PM.thumb.png.04f73db1bb71a2e5a9b1eb6cd84b05e0.pngWould greatly appreciate if you can have a look at it. Thanks for your help!

 

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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!

Link to post
  • 0
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. 

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...