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

Help with Slideshow Gallery for mobile


Recommended Posts

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

 

Link to post
  • Replies 29
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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

Posted Images

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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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!

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 1 month later...

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

Screen Shot 2020-07-28 at 8.57.58 PM.png

Screen Shot 2020-07-28 at 8.56.47 PM.png

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 2 weeks later...
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!

Screen Shot 2020-08-13 at 10.36.00 AM.png

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 1 month later...
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

Link to post

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 🙂

screenshot1.png

Edited by JC123
Link to post
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

Link to post

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

Screen Shot 2020-10-10 at 8.42.01 PM.png

Screen Shot 2020-10-10 at 8.42.11 PM.png

Link to post
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

Screen Shot 2020-10-10 at 8.42.01 PM.png

Screen Shot 2020-10-10 at 8.42.11 PM.png

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.  

Link to post
  • 2 weeks later...

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 2 weeks later...

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

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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

 

Edited by t12ojs
Add detail
Link to post
/* 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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

image.thumb.png.df0700e35f7dfa52c0bde2e5647feeaf.png

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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