Squarespace Lightbox New Padding

Site URL: https://noahlangphotography.com/blog/beehive-trail-acadia-national-park

It appears that SS made some updates, because now when an image is clicked on to open in lightbox, it scrolls down because the inline styles are set to style="top: 53765.5px; height: 403px;" for lightbox.

And using 

.yui3-lightbox2-content {

top: 0 !important;

}

doesn't even work right because then for some reason it causes the whole page to do this weird scroll to the top as the image opens.

Here's an example page without the CSS applied.

https://noahlangphotography.com/blog/beehive-trail-acadia-national-park

Here's an example page with the CSS applied to show the difference.

https://noahlangphotography.com/blog/hadlock-ponds-loop-trail-acadia-national-park

Thank you!

2 hours ago, noahawaii said:

Site URL: https://noahlangphotography.com/blog/beehive-trail-acadia-national-park

It appears that SS made some updates, because now when an image is clicked on to open in lightbox, it scrolls down because the inline styles are set to style="top: 53765.5px; height: 403px;" for lightbox.

And using 

.yui3-lightbox2-content {

top: 0 !important;

}

doesn't even work right because then for some reason it causes the whole page to do this weird scroll to the top as the image opens.

Here's an example page without the CSS applied.

https://noahlangphotography.com/blog/beehive-trail-acadia-national-park

Here's an example page with the CSS applied to show the difference.

https://noahlangphotography.com/blog/hadlock-ponds-loop-trail-acadia-national-park

 

Thank you!

Your site's lightbox behaved different, did you apply some tweak to change the lightbox animation?

I am having this same issue - halp!

4 hours ago, noahawaii said:

.yui3-lightbox2-content {

top: 0 !important;

}

That css worked for me, thanks! Must be a platform-wide glitch.

25 minutes ago, dsophie said:

That css worked for me, thanks! Must be a platform-wide glitch.

Thank you so much ♥

32 minutes ago, dsophie said:

That css worked for me, thanks! Must be a platform-wide glitch.

Are you not getting the weird scrolling to the top when you apply the css? Because it worked for me to reduce the margin, but it opens the photo while at the same time scrolling to the top of the page, then scrolling back when the photo is closed.

Click on a photo in this article to see what I mean.

https://noahlangphotography.com/blog/hadlock-ponds-loop-trail-acadia-national-park

Here's kind of a backward fix right now. I'm still having the inline style issue when I close my image, but I'm using this temporarily.

Hopefully Squarespace gets it together, and I'll see if I can fix that last scrolling issue when I have more time.

<script>
  window.addEventListener('scroll', () => {
    const lightbox = document.querySelector('.yui3-lightbox2-content');
    if (lightbox) {
        lightbox.style.top = `${window.scrollY}px`;
    }
});
</script>

SS fixed the issue. I'm sure after a bunch of complaints, they realized this was serious.

SS broke it again. The script above is a good temporary fix for me.

On 11/19/2024 at 9:06 PM, noahawaii said:

Are you not getting the weird scrolling to the top when you apply the css? Because it worked for me to reduce the margin, but it opens the photo while at the same time scrolling to the top of the page, then scrolling back when the photo is closed.

 

Click on a photo in this article to see what I mean.

 

https://noahlangphotography.com/blog/hadlock-ponds-loop-trail-acadia-national-park

Sorry for the delayed response! What I see when clicking on a photo inside your link is that the page scrolls down a bit after the image opens. I'm not sure what could be causing that. It's not happening on my end, the page stays where it was before clicking the photo.