Jump to content

Lightbox code is turning my row of three images into a single column

Recommended Posts

Hello! I'm working a team page for a client's website. The client has requested lightboxes linked below each team member's image and name to pull up their full bio. I followed the instructions for setting up a lightbox that I found here: https://www.spacetutorials.com/squarespace-lightbox/text and it is working exactly how I want it to.

The problem is that I have their images in "Stack" format with their name and title. Then the lightbox is a code block added below the stack. I want three bios per row. I have three images (or "stacks") lined up, but as soon as I add the code below the stack, it shifts the row of three image/code columns into a single column of three rows on the lefthand side. I can't figure out what about the code is doing this. 

 

I have this code in my page header code:

<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />

I have this in my page footer code:

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

And this as a code block underneath image:

<a href="#" data-featherlight="#bio-sarah"<p style="font-family:brandon-grotesque; font-weight:500; font-style:normal; font-size: 25px; text-align:left; color:#022346;">Read More...</a>

<div style="display:none;">
<div id="bio-sarah"<p style="font-family:brandon-grotesque; font-weight:500; font-style:normal; font-size: 20px; text-align:center; color:#000000;">Sarah is from Washington, D.C. She received her BA in Biochemistry and Molecular Biology from Boston University. She is currently enrolled as a premedical student at Harvard Medical School.</div>

 

The page is private so I can't share the direct link, but I've included screenshots below. The first image is how I structure it when I'm editing. This is how I want it to look. As soon as I click save and look at the published version, it looks like the second image.

 

Does anyone have any thoughts as to what in the code would be causing this shift?

Screen Shot 2021-02-18 at 3.25.20 PM.png

Screen Shot 2021-02-18 at 3.25.43 PM.png

Edited by beccaj11
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Difficult to help without checking url.

You can use Lightbox Plugin to add lightbox, it will be easier.

See how this plugin works

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/19/2021 at 11:44 PM, beccaj11 said:

Unfortunately, it's not in our budget to purchase an additional plugin. I was hoping someone might have a guess as to what part of the code is causing a shift in the format.

Can you share link to page in screenshot? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.