Help with Slideshow Gallery for mobile

On 11/17/2022 at 10:52 AM, Clindes said:

portfolio-new.squarespace.com
Passcode: port

 

hey @tuanphan, 

so far I have the images full width, but there is a huge top space. for the one that has smaller height.  just wonder if you can help me to look into this and if it's possible to make it align on the top underneath the menu bar? thanks. 

 

Sorry for delay. Just had some days off

The image itself has a top padding, you can add this to Design > Custom CSS to unset it

@media screen and (max-width:767px) {
.gallery-slideshow-item img {
    top: 0 !important;
}
}

Hello @tuanphan i'm having a similar issue with slideshow view on mobile for https://eduplus.ae/ I used the code u provided (below) but it just crops the images without resizing. Also the font and button are quite big, they're not resized along. Could you please help? Thanks.

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    height: 40vh !important;
    min-height: unset !important;
}
  }
</style>

15 hours ago, EduPlusAE said:

Hello @tuanphan i'm having a similar issue with slideshow view on mobile for https://eduplus.ae/ I used the code u provided (below) but it just crops the images without resizing. Also the font and button are quite big, they're not resized along. Could you please help? Thanks.

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    height: 40vh !important;
    min-height: unset !important;
}
  }
</style>

Hi,

You want

• Resize slide image
• Reduce button size
• Reduce text size

Is that right?

Hi @tuanphan! Having a really similar issue with a banner slideshow on my homepage. The images show up great on the desktop version, but are totally cropped on mobile. Have tried multiple codes that you've shared here to see if I can rectify, but nothing has worked yet. 

Site URL: https://garlic-emu-9yad.squarespace.com

Any chance you have another solution? Thanks! 

On 1/26/2023 at 8:10 AM, tuanphan said:

Hi,

You want

• Resize slide image
• Reduce button size
• Reduce text size

Is that right?

Hello @tuanphan yes correct. awaiting your kind reply.

On 1/26/2023 at 2:25 PM, HarrisonWW said:

Hi @tuanphan! Having a really similar issue with a banner slideshow on my homepage. The images show up great on the desktop version, but are totally cropped on mobile. Have tried multiple codes that you've shared here to see if I can rectify, but nothing has worked yet. 

Site URL: https://garlic-emu-9yad.squarespace.com

Any chance you have another solution? Thanks! 

 

Use this

@media screen and (max-width: 767px) {
    .user-items-list-item-container[data-section-id="63cb2a9b0fc5fa4674da2f99"] ul {
        min-height:unset !important;
        height: 30vh;
    }
}

Hi @tuanphan,

I read through the other posts but can't seem to find the fix for my issue. I have a gallery slideshow on my homepage with five photos. All photos are about the same size and dimensions (5760 x 3840) and look great on desktop, but only three of the five show up properly on mobile. The other two don't seem to be adjusting for mobile, so a good portion of the picture is cropped out. I am on 7.0, and tried some of the CSS code posted here but it didn't seem to change anything.

https://sponge-clownfish-lxn8.squarespace.com/

Passcode: sqduffield

Thanks for your help!

I made an improvement by replacing the two pictures with different versions provided by my photographer (I figured that had something to do with it, as the the other three pics were from a different photographer.)

They look better now, but I'd still like to know how to make them look the best on mobile (it's the indoor photos that don't quite convert as well.)

Thanks!

On 2/3/2023 at 6:43 AM, StacyD said:

Hi @tuanphan,

I read through the other posts but can't seem to find the fix for my issue. I have a gallery slideshow on my homepage with five photos. All photos are about the same size and dimensions (5760 x 3840) and look great on desktop, but only three of the five show up properly on mobile. The other two don't seem to be adjusting for mobile, so a good portion of the picture is cropped out. I am on 7.0, and tried some of the CSS code posted here but it didn't seem to change anything.

https://sponge-clownfish-lxn8.squarespace.com/

Passcode: sqduffield

Thanks for your help!

You want on mobile, it will be like this?

Hi,

Yes. I think I fixed it now. I made some tweaks to the photos, and put in some custom code and I think it looks alright now on mobile. Appreciate your response and if you have any feedback! Thank you~

@tuanphan I have similar issue, i want to remove the arrows from my banner slideshow on mobile - i have it off in settings and there isn't any arrow on desktop but it shows on mobile right now, wouldnt mind if the banner slideshow played on loop automatically too, please help

https://deer-reindeer-c3g9.squarespace.com/

image for exmaple

On 3/16/2023 at 5:04 AM, aa53 said:

image for exmaple

What is password?

Hello Tuan,
I'm having a similar issue, I have tried several of the snippets of code included in this forum string but I can not seem to get the images in the "banner slideshow" on the "/home" page to resize for different screen sizes. You seem to have a good handle on the problem can you have a look and tell me what I'm doing wrong please.

www.sweetwatermusicfestival.com

I've listed a few of the different snippets I've tried below... I think I must just be getting a piece of the code incorrect... if you could help I'd really appreciate it. 

I've tried...
/* resize mobile slideshow */
@media screen and (max-width:640px) {
section#gallery {
    height: 30vh;
}
section#gallery img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

and...

@media screen and (max-width: 460px) {
    .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height: 40vh !important;
    }
    .homepage .gallery-fullscreen-slideshow[data-width="full"] {
        height: 40vh !important
    }
    .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img {
    object-fit: contain !important;
}
}

and I even tried this from another designer.

/*Shut off Parallax - Page Settings - Advanced*/

<script>
  Static.SQUARESPACE_CONTEXT.tweakJSON[“tweak-overlay-parallax-enabled”] = false;
</script>

/*Resize Background Index Image - Design - Advanced*/
@media screen and (max-width:400px) {
#home {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#000000; //change as needed
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
  flex-direction:column-reverse;}

  .Index-page-image {
    position:relative;
    height:40vh;
  }

  .Index-page-content {
    min-height:initial !important;
    padding-top:10px;
  }
}

On 4/18/2023 at 12:23 AM, Innisfree77 said:

Hello Tuan,
I'm having a similar issue, I have tried several of the snippets of code included in this forum string but I can not seem to get the images in the "banner slideshow" on the "/home" page to resize for different screen sizes. You seem to have a good handle on the problem can you have a look and tell me what I'm doing wrong please.

www.sweetwatermusicfestival.com

I've listed a few of the different snippets I've tried below... I think I must just be getting a piece of the code incorrect... if you could help I'd really appreciate it. 

I've tried...
/* resize mobile slideshow */
@media screen and (max-width:640px) {
section#gallery {
    height: 30vh;
}
section#gallery img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

and...

@media screen and (max-width: 460px) {
    .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height: 40vh !important;
    }
    .homepage .gallery-fullscreen-slideshow[data-width="full"] {
        height: 40vh !important
    }
    .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img {
    object-fit: contain !important;
}
}

and I even tried this from another designer.

/*Shut off Parallax - Page Settings - Advanced*/

<script>
  Static.SQUARESPACE_CONTEXT.tweakJSON[“tweak-overlay-parallax-enabled”] = false;
</script>

/*Resize Background Index Image - Design - Advanced*/
@media screen and (max-width:400px) {
#home {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#000000; //change as needed
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
  flex-direction:column-reverse;}

  .Index-page-image {
    position:relative;
    height:40vh;
  }

  .Index-page-content {
    min-height:initial !important;
    padding-top:10px;
  }
}

Add to Design > Custom CSS

/* Mobile - Resize Slideshow */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] ul {
    min-height: unset !important;
    height: 300px;
}
.user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] img {
    object-fit: contain !important;
    height: auto !important;
}
}

Hi Tuan,

Cool to see you in this thread also! You are the godfather of this issue clearly 🙂 

Ive tried all the solutions, with the 7.1 dynamic block thought I am a bit lost, and not managing to make the images also fill the VH set to full screen on mobile in the slider section. The idea is for the gallery to be as it is on desktop, and then take up almost full screen on mobile (but make the images which are originally horizontal fill the full height of the slider). Hope this makes sense! Thank you so much in advance!

https://fuchsia-arugula-ml4y.squarespace.com/

PW: SV2023

SectionID: section[data-section-id="64415b63e195681f81f38a32"]

On 4/21/2023 at 5:49 PM, SashaMk said:

Hi Tuan,

Cool to see you in this thread also! You are the godfather of this issue clearly 🙂 

Ive tried all the solutions, with the 7.1 dynamic block thought I am a bit lost, and not managing to make the images also fill the VH set to full screen on mobile in the slider section. The idea is for the gallery to be as it is on desktop, and then take up almost full screen on mobile (but make the images which are originally horizontal fill the full height of the slider). Hope this makes sense! Thank you so much in advance!

https://fuchsia-arugula-ml4y.squarespace.com/

PW: SV2023

SectionID: section[data-section-id="64415b63e195681f81f38a32"]

It looks like you figured it out?

On 4/23/2023 at 10:56 AM, tuanphan said:

It looks like you figured it out?

Hi Tuan,

[UPD: I actually found a different type of gallery section which already allows for this config 😅 thank you in any case! ]

Unfortunately not, please kindly note the section I am referring to is the one with the slider and many photos at the end of the page. It doesnt show full screen of mobile. I tried several solution which you kindly proposed, but non seem to work.  Is it something you can help with? 🙂 Thank you in advance!

 

On 4/24/2023 at 5:49 PM, SashaMk said:

Hi Tuan,

[UPD: I actually found a different type of gallery section which already allows for this config 😅 thank you in any case! ]

 

Unfortunately not, please kindly note the section I am referring to is the one with the slider and many photos at the end of the page. It doesnt show full screen of mobile. I tried several solution which you kindly proposed, but non seem to work.  Is it something you can help with? 🙂 Thank you in advance!

 

 

You mean this?

Hello, I am having this issue with my site homepage slider. https://www.eandgassociates.org/

The code for 7.1 does not work for my mobile view. 

3 hours ago, GHShadow said:

Hello, I am having this issue with my site homepage slider. https://www.eandgassociates.org/

The code for 7.1 does not work for my mobile view. 

 

I'm not a SquareSpace pro like others here, but this may help.   You should be able to adjust the Viewport Height value as you see fit.  Best of luck!

<style>
@media screen and (max-width:767px)	{
.gallery-fullscreen-slideshow {
height: 35vh !important;
min-height: unset !important;
}
</style>

Hello @tuanphan, would you be able to help me out with a similar issue. I've tried several of the codes posted here with no avail. Trying to get the carousel slideshow on the top of the home page to auto-resize ? Website is: https://avinn.com/

Thank you so much!

Thank you for this unfortunately the code did not change the mobile view for my page.

On 5/15/2023 at 5:39 PM, GHShadow said:

Thank you for this unfortunately the code did not change the mobile view for my page.

Apologies!  Was working quickly and forgot the closing bracket on the query.  Perhaps it still won't solve your problem, but either way I wanted to notify you of my mistake.

<style>
@media screen and (max-width:767px)	{
.gallery-fullscreen-slideshow {
height: 35vh !important;
min-height: unset !important; }
}
</style>

On 10/2/2020 at 9:48 AM, tuanphan said:

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width:767px) {
    .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    	height: 35vh !important;
    }
  }
</style>

 

This code does almost exactly what I need. I like that I can adjust the height on the mobile screen. The only problem is, the resized image is centered. But I would like the image on the left not to be cut off. It should be left aligned instead.

(The fading is part of the original banner image).

Like so:

Link to the page: copper-minnow-p73t.squarespace.com

Password: hello