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

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

 

Share this post


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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!

Share this post


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

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

Share this post


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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