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 comment

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;
}
}

 

Link to comment
  • 0

Add to Home > design > custom CSS

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

 

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

Link to comment
  • 0
6 minutes ago, eleonored said:

Hi, /config is url for site owner.

Can you share link to exact page in screenshot?

Link to comment
  • 0
43 minutes ago, eleonored said:
@media screen and (max-width:767px) {
[data-section-id="5e6f3ce521ba4c55435a0a05"] {
    height: 40vh;
}
}

 

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

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

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

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

 

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

 

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...