Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Help with Slideshow Gallery for mobile


Recommended Posts

Thank you for this.

I hope I ain't bothering you but on my table the lower three slideshows are slightly cropped on both sides? My first slideshow is perfectly fine though?

Edited by t12ojs
typo
Link to post
  • Replies 66
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Add to Home > Design > Custom CSS /* resize home slide */ @media screen and (max-width:640px) { section#p2p-home img { width: 100% !important; left: 0 !important; height: auto !i

Add to Design > Custom CSS @media screen and (max-width:767px) { body.homepage .gallery-fullscreen-slideshow { height: 30vh !important; } }  

Posted Images

7 minutes ago, t12ojs said:

Thank you for this.

I hope I ain't bothering you but on my table the lower three slideshows are slightly cropped on both sides? My first slideshow is perfectly fine though?

@media screen and (max-width: 767px) {
    .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;
}
}

 

Link to post
2 minutes ago, tuanphan said:

@media screen and (max-width: 767px) {
    .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;
}
}

 

It still has the same issue.

Link to post
  • 4 weeks later...

Hello.  I am also having issues making my slideshow on a mobile page full width.

https://www.hirokazutakei.com/portrait

how can i make this full width as a slideshow when viewing on mobile?

any help would be appreciated!

Link to post
On 11/28/2020 at 11:04 PM, DotunAbeshinbioke said:

Hello -

@tuanphan

 

I am having difficulty working on making the slider gallery mobile friendly it looks

great on desktop but the images a cropped weirdly.

website:

https://jennifer-nnamani.squarespace.com/

Have you solved it yet?

Link to post
18 hours ago, take1official said:

Hello.  I am also having issues making my slideshow on a mobile page full width.

https://www.hirokazutakei.com/portrait

how can i make this full width as a slideshow when viewing on mobile?

any help would be appreciated!

I see fine here. Did you solve?

if no, can you describe in detail?

Link to post
On 12/2/2020 at 4:52 PM, this-nicocreative said:

Site URL: http://www.this-is-nico.com

Hello Tuan, can you help me also please? I have a slideshow gallery on my home page that looks good on desktop but its not resizing for the mobile.

Thanks Nicola

 

Hi. Can you disable autoplay? We can check easier

Link to post
On 12/2/2020 at 5:53 PM, tuanphan said:

I see fine here. Did you solve?

if no, can you describe in detail?

It’s not filling up the empty spaces here. Is it possible to take up the full screen when viewing in mobile?

 

 

or, another solution is to add a normal gallery page on mobile, and instead of vertical scroll, make it show one image at a time

1A0F68D6-FB14-49DC-BF06-02B5A86300CB.jpeg

E8F7A4D7-91A4-41B8-B072-12D5D4A91FC6.jpeg

Link to post
On 12/4/2020 at 5:02 PM, this-nicocreative said:

Hello Tuan, Ive just disabled it. Thank you, Nicola

Add to Home > Design > Custom CSS. You can adjust number 40

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

Link to post
On 12/5/2020 at 12:16 PM, take1official said:

It’s not filling up the empty spaces here. Is it possible to take up the full screen when viewing in mobile?

 

 

or, another solution is to add a normal gallery page on mobile, and instead of vertical scroll, make it show one image at a time

1A0F68D6-FB14-49DC-BF06-02B5A86300CB.jpeg

E8F7A4D7-91A4-41B8-B072-12D5D4A91FC6.jpeg

It looks like there is no way to adjust this :(

image.thumb.png.0a9fd1d59443dd079dd7f4d3f948a5da.png

Link to post
On 12/7/2020 at 6:13 AM, phardy said:

Hi Taun,

Are you still on this thread? I was wondering if you knew how to have an image scoll with in a device like this: https://uxfol.io/project/04f0af4a/House2Home

Can you describe in detail & take a screenshot?

Link to post

Okay, I give up. I've spent almost two hours trying to use and tweak various codes in this thread, but no luck. I'm in 7.0.

I want to do the same thing as the others — force my gallery so it doesn't get small and cropped on mobile. I'm using my gallery as a testimonial section though, so the background image is just white and the text is what's important. The headline is visible on mobile but I need to have it so the copy  doesn't crop off. (Images below are two separate headlines of the rotating testimonials.)

https://oleander-pomegranate-ka8f.squarespace.com
Password: temporaryrebel

Thanks in advance for any help!
desktop.thumb.png.01cc157b6a8345199f9788a69805b6df.pngMichael mobile.png.24b212c549d4cbd840aa3082f704fa66.png

Edited by MichaelG_2001
Link to post
On 12/10/2020 at 10:42 PM, MichaelG_2001 said:

Okay, I give up. I've spent almost two hours trying to use and tweak various codes in this thread, but no luck. I'm in 7.0.

I want to do the same thing as the others — force my gallery so it doesn't get small and cropped on mobile. I'm using my gallery as a testimonial section though, so the background image is just white and the text is what's important. The headline is visible on mobile but I need to have it so the copy  doesn't crop off. (Images below are two separate headlines of the rotating testimonials.)

https://oleander-pomegranate-ka8f.squarespace.com
Password: temporaryrebel

Thanks in advance for any help!
desktop.thumb.png.01cc157b6a8345199f9788a69805b6df.pngMichael mobile.png.24b212c549d4cbd840aa3082f704fa66.png

Hi. Can you disable autoplay? We can check easier.

Also you can use this code to create testimonials, easy to install/customize without coding skills.

Link to post
  • 1 month later...

Hi, I'm facing the same problem. I have tried using most of the codes shared on this thread, unfortunately they don't seem to work.

I'm using the slideshow reel on Squarespace 7.1. My horizontal images are getting cropped from the sides on the mobile version, they need to be resized so they can be entirely visible. Any suggestions?

Link to post
On 1/18/2021 at 6:32 PM, SK1889 said:

Hi, I'm facing the same problem. I have tried using most of the codes shared on this thread, unfortunately they don't seem to work.

I'm using the slideshow reel on Squarespace 7.1. My horizontal images are getting cropped from the sides on the mobile version, they need to be resized so they can be entirely visible. Any suggestions?

Can you share link to page where you use reel? We can check easier

Link to post
  • 2 weeks later...

Hi @tuanphan!

The homepage gallery on our site doesn't resize properly on mobile. All the other pages and content are responsive and have no issues, but the homepage gallery is cropped. We'd like to still see the full width of the images, but sized to fit whenever it's viewed on a mobile screen. Is there a way we can fix this? Please let me know! Thanks so much!

Site link: https://www.chelseadc.com

Edited by ChelseaDC
Link to post
On 2/2/2021 at 1:46 AM, ChelseaDC said:

Hi @tuanphan!

The homepage gallery on our site doesn't resize properly on mobile. All the other pages and content are responsive and have no issues, but the homepage gallery is cropped. We'd like to still see the full width of the images, but sized to fit whenever it's viewed on a mobile screen. Is there a way we can fix this? Please let me know! Thanks so much!

Site link: https://www.chelseadc.com

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

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

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...