Help with Slideshow Gallery for mobile

Ahh @tuanphan it worked! I could cry 🙂 thank you!!!

Hello @tuanphan ! 

My homepage slideshow looks decent on desktop but it crops in the center for mobile. I am OK with the image cropping, but is there a way to shift the crop onto the dog and not in the empty center of the ship illustration? 

URL: https://www.paulinazuckerman.com/

On 6/9/2021 at 10:30 AM, Kittiwake said:

Hello @tuanphan ! 

My homepage slideshow looks decent on desktop but it crops in the center for mobile. I am OK with the image cropping, but is there a way to shift the crop onto the dog and not in the empty center of the ship illustration? 

URL: https://www.paulinazuckerman.com/

 

If resize, white bar will appear.

Add to Design > Custom CSS

/* mobile-resize image */
@media screen and (max-width:640px) {
#fullscreenBrowser .slideshow .slide img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

I have two galleries on my site that look small but fine in mobile view but the captions (which have my photo credits) don't show up because they are set to hover. Any ideas on how I could get these visible? I'm wondering if I should just to a mobile photo credit list page instead.

http://www.southernsunevents.com

PW: sse2020

Pages are:

https://www.southernsunevents.com/tnca

https://www.southernsunevents.com/mfah

6 hours ago, SouthernSunEvents said:

I have two galleries on my site that look small but fine in mobile view but the captions (which have my photo credits) don't show up because they are set to hover. Any ideas on how I could get these visible? I'm wondering if I should just to a mobile photo credit list page instead.

http://www.southernsunevents.com

PW: sse2020

Pages are:

https://www.southernsunevents.com/tnca

https://www.southernsunevents.com/mfah

Add to Design > Custom CSS

/* Mobile-Show caption */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .slide.loaded .meta {
    opacity: 1 !important;
    display: block !important;
}
}

Hi,

I have a similar problem with my headlines images/slideshow not adapted to a mobile version. 

Can someone help me? @tuanphan

https://www.giorgiamoras.com/

On 8/24/2021 at 9:24 PM, giorgiamoras said:

Hi,

I have a similar problem with my headlines images/slideshow not adapted to a mobile version. 

Can someone help me? @tuanphan

https://www.giorgiamoras.com/

Hi,

Sorry for the delay.

Where is slideshow?

Hi tuan - I'm having the same issue. The slideshow gets cut off on mobile. Any suggestions? www.thelabel318.com

Hi! I really need your help! Some of the text/images are getting cut off and overlapping on my mobile banner slide show. Also I was wondering if it was possible to have the images fully bleed into one another just how it does on the website?? So it looks like its one long image rather than 10 separate ones. Is that possible??

On 9/13/2021 at 9:47 AM, EricGoldberg said:

Hi! I really need your help! Some of the text/images are getting cut off and overlapping on my mobile banner slide show. Also I was wondering if it was possible to have the images fully bleed into one another just how it does on the website?? So it looks like its one long image rather than 10 separate ones. Is that possible??

Just sent answer

please can someone help me?

https://disc-chameleon-kpxc.squarespace.com/config/design/custom-css

I cant see my gallery in the mobile view.. Works fine on pc but on the phone it only shows the first page! when I click on the Plus button it goes nowhere:/

already tried to go to CSS and put codes but honestly I must be doing something wrong :/

@tuanphan My template is impact no matter what code I use my slideshow will not become full screen on desktop or mobile. 

Any help? It's for the main slidershow gallery on the homepage

Here's the link: 

https://www.homestead-village.com/

12 hours ago, tomas_frederico said:

please can someone help me?

https://disc-chameleon-kpxc.squarespace.com/config/design/custom-css

I cant see my gallery in the mobile view.. Works fine on pc but on the phone it only shows the first page! when I click on the Plus button it goes nowhere:/

already tried to go to CSS and put codes but honestly I must be doing something wrong :/

You mean gallery on this page? It looks fine to me

https://disc-chameleon-kpxc.squarespace.com/collections

9 hours ago, Shume27 said:

@tuanphan My template is impact no matter what code I use my slideshow will not become full screen on desktop or mobile. 

Any help? It's for the main slidershow gallery on the homepage

 

Here's the link: 

https://www.homestead-village.com/

 

 

It looks like you solved? Do you need to reduce top/bottom white spacing on mobile?

On 11/5/2020 at 10:00 AM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Hi Tuanphan, 

I'm having a similar issue where everything is cropped perfectly on desktop, but no matter how many times I've tried, I can't seem to get the cropping correct on mobile view. I was hoping you could help. 

Thank you in advance, 

Zach

On 1/30/2022 at 4:01 AM, zachtrem said:

Hi Tuanphan, 

I'm having a similar issue where everything is cropped perfectly on desktop, but no matter how many times I've tried, I can't seem to get the cropping correct on mobile view. I was hoping you could help. 

Thank you in advance, 

Zach

What is site url?

Hi Tuanphan, 

Same story where everything is cropped perfectly on desktop, but I can't seem to get the cropping correct on mobile view. I was hoping you could help — thanks in advance, here is my site url: https://www.thisis5am.com/

On 2/5/2022 at 12:02 AM, JURK said:

Hi Tuanphan, 

Same story where everything is cropped perfectly on desktop, but I can't seem to get the cropping correct on mobile view. I was hoping you could help — thanks in advance, here is my site url: https://www.thisis5am.com/

Resize slideshow under video on homepage??

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
.gallery-reel[data-width="inset"] {
    height: 40vh !important;
}
}

Is there anything you can do if you aren't a business account, but just a personal account? 

brickchurch.net/home-1

I am trying to get the slideshow to fit well on our mobile, but it doesnt look like CSS alteration is available?

On 4/7/2022 at 10:40 PM, brickchurch said:

Is there anything you can do if you aren't a business account, but just a personal account? 

brickchurch.net/home-1

I am trying to get the slideshow to fit well on our mobile, but it doesnt look like CSS alteration is available?

Which code are you referrring to?

Latest comment code is CSS, add to Design > Custom CSS

Hi @tuanphan! I am having a similar issue with our site https://studiogoetz.com/

The image slideshows on the project pages on mobile get very squished. (page example: https://studiogoetz.com/upper-west-side-apartment) Is there a way to make them appear larger vertically? So when you go to a project page, you mostly see the images and then you would have to scroll down to see the text.

Also (unrelated) - is there a way to have the social icons align to the footer text on mobile? It looks a little funny. 

Thanks!

17 hours ago, sg_squarespace said:

Hi @tuanphan! I am having a similar issue with our site https://studiogoetz.com/

The image slideshows on the project pages on mobile get very squished. (page example: https://studiogoetz.com/upper-west-side-apartment) Is there a way to make them appear larger vertically? So when you go to a project page, you mostly see the images and then you would have to scroll down to see the text.

Also (unrelated) - is there a way to have the social icons align to the footer text on mobile? It looks a little funny. 

Thanks!

#1. Make it bigger & show 1/2 images/slide?

#2. Footer icons, don't remove any code in your current code

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
footer#footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
footer#footer:before, footer#footer:after {
    display: none;
}}

@tuanphan #2 worked great, thank you!

For #1, we just want the slideshow to appear bigger on mobile so that it fills up more of the screen and visitors to the mobile site won't have to zoom in to see the pictures. For instance, in the screenshot above, if the first photo could fill up most of the screen. Then only a small portion of the next image in the slideshow would show to the right of the first image.

Hi @tuanphan, any update on this?

Just had some day off. Do you still need help on this?

On 4/13/2022 at 9:11 PM, sg_squarespace said:

@tuanphan #2 worked great, thank you!

For #1, we just want the slideshow to appear bigger on mobile so that it fills up more of the screen and visitors to the mobile site won't have to zoom in to see the pictures. For instance, in the screenshot above, if the first photo could fill up most of the screen. Then only a small portion of the next image in the slideshow would show to the right of the first image.

@tuanphan yes I do!