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 11
  • 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

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

Create an account or sign in to comment

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


×
×
  • Create New...