Maintaining Smaller Image Size for Lightbox

Site URL: https://bullfrog-shark-2tkh.squarespace.com

Hello!

I am wondering if it's possible to maintain the original image size when you click on a lightbox image. Currently, when I click on the images on desktop, it expands the image to nearly the width/height of my monitor, stretching out the image a lot and making it appear not clear/crisp. The images' original size is 960 x 540px but the default lightbox settings are stretching it to be much larger, which is not ideal. 

Squarespace Site: bullfrog-shark-2tkh.squarespace.com

Pass: test2021

My current site (which I am trying to move over to Squarespace) is able to maintain the correct image dimensions but I am not at all coding savvy. See here for example of what result I would like to apply to my Squarespace site:

http://amyle.ca

Thank you in advance if you are able to help!

Hi,

Do you still need help on this?

Images on homepage?

1 hour ago, tuanphan said:

Hi,

Do you still need help on this?

Images on homepage?

Hi! Yes, please. I would really like help with this. And yes, it's for the images on the homepage. 🙂

On 8/31/2021 at 8:58 AM, Silberry said:

Hi! Yes, please. I would really like help with this. And yes, it's for the images on the homepage. 🙂

Hi,

Your site is expired. You can contact Squarespace Customer Care to extend it (free)

12 minutes ago, tuanphan said:

Hi,

Your site is expired. You can contact Squarespace Customer Care to extend it (free)

Ah, sorry about that. I've gone ahead and just duplicated the site, so it should last a while longer.

https://green-penguin-bw8f.squarespace.com/

Pass: test2021

On 9/1/2021 at 4:54 PM, Silberry said:

Ah, sorry about that. I've gone ahead and just duplicated the site, so it should last a while longer.

https://green-penguin-bw8f.squarespace.com/

Pass: test2021

Try adding to Design > Custom CSS

/* Resize lightbox images on mobile */
@media screen and (max-width:767px) {
.gallery-lightbox-item img {
    width: 50% !important;
    height: auto !important;
    position: absolute !important;
    left: 50%;
	top: 505%;
    transform: translate(-50%,-50%);
}
}

14 minutes ago, tuanphan said:

Try adding to Design > Custom CSS

/* Resize lightbox images on mobile */
@media screen and (max-width:767px) {
.gallery-lightbox-item img {
    width: 50% !important;
    height: auto !important;
    position: absolute !important;
    left: 50%;
	top: 505%;
    transform: translate(-50%,-50%);
}
}

 

Hi! Thank you for trying to offer a solution. Unfortunately, I tried to put this code in and it doesn't change anything on desktop. The images are still large and stretched. Also, now images don't display on mobile if the phone is vertical (without the code, the images would appear when clicked).

The above code runs on mobile only, if you want desktop, use this new code

/* Resize lightbox images on mobile */
@media screen and (min-width:768px) {
.gallery-lightbox-item img {
    width: 50% !important;
    height: auto !important;
    position: absolute !important;
    left: 50%;
	top: 505%;
    transform: translate(-50%,-50%);
}
}

28 minutes ago, tuanphan said:

The above code runs on mobile only, if you want desktop, use this new code

/* Resize lightbox images on mobile */
@media screen and (min-width:768px) {
.gallery-lightbox-item img {
    width: 50% !important;
    height: auto !important;
    position: absolute !important;
    left: 50%;
	top: 505%;
    transform: translate(-50%,-50%);
}
}

 

Hi! So when I put this code into the Custom CSS, I'm getting the same effect as the mobile one where it shows up completely empty when the lightbox opens up (this is what I get when I only have the code from your latest post in the Custom CSS. See attached):

On 9/5/2021 at 12:33 PM, Silberry said:

Hi! So when I put this code into the Custom CSS, I'm getting the same effect as the mobile one where it shows up completely empty when the lightbox opens up (this is what I get when I only have the code from your latest post in the Custom CSS. See attached):

Your site is removed?

Hi, Bangank!

It's not actually removed - just the trial expired while I was waiting for someone to respond. I've duplicated it again here:

https://haddock-whale-dlfp.squarespace.com/

Pass: test2021

I am still hoping someone can help me out with this. Thank you in advance!

On 9/28/2021 at 5:46 PM, Silberry said:

Hi, Bangank!

It's not actually removed - just the trial expired while I was waiting for someone to respond. I've duplicated it again here:

https://haddock-whale-dlfp.squarespace.com/

Pass: test2021

I am still hoping someone can help me out with this. Thank you in advance!

top: 505%;

change it to

top: 50%;

2 hours ago, tuanphan said:

top: 505%;

change it to

 

top: 50%;

Thank you so much, Tuan! I tried it out and it worked this time. 🙂

@tuanphan Hi Tuan, I see you did great work in solving this for Silberry! I'm having the same issue, and am curious if you'd be willing to help me. I've tried the same code, as shown below. The images are still getting stretched to full screen with the light box. Is there anything I might be able to do to fix this?

• Squarespace Version 7.1
• Website page: https://www.cgdesign.me/work/texty-pdt55

Thanks...

On 7/27/2023 at 4:15 AM, bukowskii said:

@tuanphan Hi Tuan, I see you did great work in solving this for Silberry! I'm having the same issue, and am curious if you'd be willing to help me. I've tried the same code, as shown below. The images are still getting stretched to full screen with the light box. Is there anything I might be able to do to fix this?

• Squarespace Version 7.1
• Website page: https://www.cgdesign.me/work/texty-pdt55

Thanks...

 

Use this code

/* Resize lightbox images on mobile */
@media screen and (min-width:768px) {
.sqs-lightbox-slideshow img {
    width: 50% !important;
    height: auto !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%);
}
}