beccaj11 Posted February 18, 2021 Share Posted February 18, 2021 (edited) 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? Edited February 18, 2021 by beccaj11 Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 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
beccaj11 Posted February 19, 2021 Author Share Posted February 19, 2021 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. Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment