Jump to content

Lightbox Code Blocks collapse, site goes haywire

Recommended Posts

I don't know what happened to my site. Using the Fluid editor...

I set up the FeatherLight light box with custom code blocks in the desktop, so visitors could click on the images and learn more about the media source. Custom js and css code in the <head>, code blocks in the body. Everything was working great.

You can see in the attached recording how the lightbox was working.

Then I went to edit my site in the Mobile, and suddenly things went haywire. Even the Desktop version is now hosed. Lightbox doesn't work, and the icons and images are now misaligned.

And joy of joys -- Squarespace doesn't have reversion. So my site is screwed!

How can I fix this? What can I do?

Do I need to leave Squarespace and build this site from scratch?

The site is: http://www.balancedmediadiet.com

Scroll down to the "Diets", which are grids of 14 squares each.

Click on a media source, such as NPR or Glen Greenwald.

The lightbox should pop up, but now it doesn't anymore.

When I search in Chrome's browser Dev Tools for my code blocks that trigger the lightbox, (search for `.media-hover-block` and you'll find them), but the code blocks have collapsed into a single point and have no height any more. So they're not clickable at all.

I can let the Mobile site go for now, I just want the Desktop version working again.

Link to comment
  • Replies 2
  • Views 224
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

2 hours ago, tonybrasunas said:

I don't know what happened to my site. Using the Fluid editor...

I set up the FeatherLight light box with custom code blocks in the desktop, so visitors could click on the images and learn more about the media source. Custom js and css code in the <head>, code blocks in the body. Everything was working great.

You can see in the attached recording how the lightbox was working.

Then I went to edit my site in the Mobile, and suddenly things went haywire. Even the Desktop version is now hosed. Lightbox doesn't work, and the icons and images are now misaligned.

And joy of joys -- Squarespace doesn't have reversion. So my site is screwed!

How can I fix this? What can I do?

Do I need to leave Squarespace and build this site from scratch?

The site is: http://www.balancedmediadiet.com

Scroll down to the "Diets", which are grids of 14 squares each.

Click on a media source, such as NPR or Glen Greenwald.

The lightbox should pop up, but now it doesn't anymore.

When I search in Chrome's browser Dev Tools for my code blocks that trigger the lightbox, (search for `.media-hover-block` and you'll find them), but the code blocks have collapsed into a single point and have no height any more. So they're not clickable at all.

I can let the Mobile site go for now, I just want the Desktop version working again.

BalancedMediaDiet.com -- RECORDED FEB 20 -- compressed.mov

Is it the element you mean?

image.thumb.png.8b4ae2c7fd479e1a245f5f0340380c7f.png

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thanks for taking a look BeyondSpace 🙏

That jumbled text is part of the issue.

But it's not the root issue. The root issue is that I had Code Blocks with click behavior over all of those square images (NPR, RT, FOX, etc.). You could click and open the "featherlight" lightbox and see more info. (Watch the video to see how those worked).

Once I started editing the mobile version of the site, everything broke on the Desktop Version: 

1. The "EDIT" view of the Desktop Version of the page looks the same, with the Code Blocks all in the right place, but:

2. The "PUBLISHED" version of the Desktop Version doesn't have those Code Blocks over the square images (NPR, RT, FOX, etc.) so you can't click on them anymore.

To restate it: in the "EDIT" view, the blocks are in the right place, but once I publish, those Code Blocks are jumbled and all appear in a single, wrong place.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.