Jump to content

7.1 Slideshow Gallery Section Mobile Resize

Recommended Posts

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
  • 3 months later...

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.