Jump to content

Help with Slideshow Gallery for mobile

Recommended Posts

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/

 

IMG_6132.PNG

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

 

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

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

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

 

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
  • 4 weeks later...
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?

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
  • 2 weeks later...

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

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

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
  • 4 weeks later...
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?

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

Screen Shot 2022-01-29 at 3.59.44 PM.png

unnamed.jpeg

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

Screen Shot 2022-01-29 at 3.59.44 PM.png

unnamed.jpeg

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

 

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

Screenshot 2022-04-07 103942.png

Which code are you referrring to?

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

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

image.png.1a563db821fca5738fb946f271121b1e.png

image.thumb.png.118fd188d60dc799b763836a94ed7b9a.png

Link to comment
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!

image.png.1a563db821fca5738fb946f271121b1e.png

image.thumb.png.118fd188d60dc799b763836a94ed7b9a.png

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

 

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

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

Link to comment

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.

 

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.