Help with Slideshow Gallery for mobile

Site URL: https://www.jibarophotos.com/cuba-in-a-thousand-miles

Hello Tuan,

I'm hoping you can help me with a Slideshow Gallery. It works and renders fine on the computer but the images crop on a mobile, the full width of the image doesnt show. I tried fixing this with the width:100% attribute suggested in some other posts but it leaves a huge gap below the image. Here is a link to the page with the slideshow gallery, scroll down a bit to find it. I want to retain the full-bleed slideshow gallery on the computer, just need the image to resize for mobile.

https://www.jibarophotos.com/cuba-in-a-thousand-miles

Thank you!!!

On 6/13/2020 at 2:03 AM, ABS said:

Site URL: https://www.jibarophotos.com/cuba-in-a-thousand-miles

Hello Tuan,

I'm hoping you can help me with a Slideshow Gallery. It works and renders fine on the computer but the images crop on a mobile, the full width of the image doesnt show. I tried fixing this with the width:100% attribute suggested in some other posts but it leaves a huge gap below the image. Here is a link to the page with the slideshow gallery, scroll down a bit to find it. I want to retain the full-bleed slideshow gallery on the computer, just need the image to resize for mobile.

https://www.jibarophotos.com/cuba-in-a-thousand-miles

Thank you!!!

 

Add to Page Settings > Advanced > Header

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

Hello Tuan,

Thanks for providing the code. I tried using this in the Design -> Custom CSS section and unfortunately it didn't work on the mobile screen. The slideshow gallery is still getting cropped. What might be the issue?

Thanks!

3 hours ago, ABS said:

Hello Tuan,

Thanks for providing the code. I tried using this in the Design -> Custom CSS section and unfortunately it didn't work on the mobile screen. The slideshow gallery is still getting cropped. What might be the issue?

Thanks!

Add to Page Settings > Advanced > Header

Hi @tuanphan, hopefully you can help me.... Im having a similar problem but with an Index gallery versus an in-page gallery... 

 I made a testimonial slider on my home page using a "Index" Gallery Page through my index Home page. I am having trouble resizing for mobile. I was able to achieve the tablet and desktop view but For some reason I can't resize the mobile view. The code I used for the table goes as follows: 

@media only screen and (min-width: 640px) and (max-width: 950px){.Index-gallery-item-image img {width: 150% !important;
  padding-left: 85px;}}

When I attempted to do for the mobile no matter what I change the width to nothing happened it's just giant. I tried playing with the margins and padding and it just breaks. Can someone please help me solve this issue? If it can't be resized is there a way I can replace the image for mobile only? 

In addition to resizing it is there a way to get rid of the top space on mobile only? I have attached a screenshot so you can see what I mean. 

Here is the link to site: https://dog-clavichord-beac.squarespace.com/

Password: lookingforhelp

On 7/29/2020 at 11:06 AM, NELLY said:

Hi @tuanphan, hopefully you can help me.... Im having a similar problem but with an Index gallery versus an in-page gallery... 

 I made a testimonial slider on my home page using a "Index" Gallery Page through my index Home page. I am having trouble resizing for mobile. I was able to achieve the tablet and desktop view but For some reason I can't resize the mobile view. The code I used for the table goes as follows: 

@media only screen and (min-width: 640px) and (max-width: 950px){.Index-gallery-item-image img {width: 150% !important;
  padding-left: 85px;}}

When I attempted to do for the mobile no matter what I change the width to nothing happened it's just giant. I tried playing with the margins and padding and it just breaks. Can someone please help me solve this issue? If it can't be resized is there a way I can replace the image for mobile only? 

In addition to resizing it is there a way to get rid of the top space on mobile only? I have attached a screenshot so you can see what I mean. 

Here is the link to site: https://dog-clavichord-beac.squarespace.com/

Password: lookingforhelp

Incorrect password

Hello @tuanphan, I'm having similar issue.

Tried the code above and not working on mobile.

Also, I'm unclear if the gode goes into the page header of Index adv. Settings or Gallery adv. Settings.

https://projx2print.squarespace.com/ -- pw: p2p

Thank you very much!

On 8/14/2020 at 12:40 AM, Fabrizio said:

Hello @tuanphan, I'm having similar issue.

Tried the code above and not working on mobile.

Also, I'm unclear if the gode goes into the page header of Index adv. Settings or Gallery adv. Settings.

https://projx2print.squarespace.com/ -- pw: p2p

Thank you very much!

Can you share link to page where you use slideshow? I don't see on homepage

Hello @tuanphan

It's the Slide on home page, here is the link: https://www.projx2print.com/

Thanks!

On 9/26/2020 at 6:39 AM, Fabrizio said:

Hello @tuanphan

It's the Slide on home page, here is the link: https://www.projx2print.com/

Thanks!

 

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 !important;
}
section#p2p-home {
    height: 180px;
}
}

23 hours ago, tuanphan said:

@media screen and (max-width:640px) { section#p2p-home img { width: 100% !important; left: 0 !important; height: auto !important; } section#p2p-home { height: 180px; } }

Worked great! Thank you @tuanphan

Hey @tuanphan

My problem is similar but I couldn't figure it out myself. Hoping you could help? 

https://www.bushtobeach.org/the-program

pass 

its the fully gallery in the screenshot under the black section of text. It bleeds across the entire screen which I want in desktop but in mobile as you can see it doesnt render correctly and shrink the photo it just crops it. 

please help 🙂

On 9/30/2020 at 3:13 PM, JC123 said:

Hey @tuanphan

My problem is similar but I couldn't figure it out myself. Hoping you could help? 

https://www.bushtobeach.org/the-program

pass B2B123

its the fully gallery in the screenshot under the black section of text. It bleeds across the entire screen which I want in desktop but in mobile as you can see it doesnt render correctly and shrink the photo it just crops it. 

 

please help 🙂

Add to Page Settings > Advanced > header

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

20 hours ago, 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>

 

WOOOOO! youre the best man! thanks so much! 

I'm having an issue with my slider as well. The images are showing up great for mobile and desktop, but for some reason there's a shit ton of padding on top and bottom of the slider... not sure why. Halp! Thank you

On 10/11/2020 at 10:42 AM, velvetrainbow said:

I'm having an issue with my slider as well. The images are showing up great for mobile and desktop, but for some reason there's a shit ton of padding on top and bottom of the slider... not sure why. Halp! Thank you

Can you share site url? We can check easier.

On 10/11/2020 at 4:42 AM, velvetrainbow said:

I'm having an issue with my slider as well. The images are showing up great for mobile and desktop, but for some reason there's a shit ton of padding on top and bottom of the slider... not sure why. Halp! Thank you

hey - i was wondering if you could share the dimensions of your images, i am struggling with my images.  I have resized them to 330x320 px which is great for mobile, but awful for desktop.  Wondered if you had any tips.  

I'm having a similar problem with my slider not displaying correctly on mobile.

http://www.thomvallance.com

Tried to add the following code to header but it didn't work.

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

1 hour ago, thetv said:

I'm having a similar problem with my slider not displaying correctly on mobile.

http://www.thomvallance.com

Tried to add the following code to header but it didn't work.

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

Above code for SS 7.1. Your site is 7.0. Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1592935235062_24451 img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#block-yui_3_17_2_1_1592935235062_24451 {height: 200px;}
}

Hi,

I am having a similar problem where my mobile images are cropped on the slideshow but are fine on desktop, could you please help me out? I need to submit for a university assignment tonight.

https://www.t12ojs.design

I have multiple slideshows on the home page too.

Thanks Owen

3 minutes ago, t12ojs said:

Hi,

I am having a similar problem where my mobile images are cropped on the slideshow but are fine on desktop, could you please help me out? I need to submit for a university assignment tonight.

https://www.t12ojs.design

I have multiple slideshows on the home page too.

Thanks Owen

Add to Home > Design > Custom CSS

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

Sorry to bother again, but my lower two slideshows are still the same? It worked for the first two though.

/* resize home mobile slideshow */
@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;
}
}

Thank you so much! Enjoy the rest of your day!

4 minutes ago, t12ojs said:

Thank you so much! Enjoy the rest of your day!

 

I see your site has also some other problems on Tablet/Mobile

eg. text a bit narrow on tablet.

Add to Home > Design > Custom CSS to solve

/* University project width */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="5fa3f28a803b56055d387dc4"] .content {
    width: 90% !important;
}
}