Romaa

Hello,

I am working on a website where I have a 'Leadership Team' Page. I have 9 leaders on this page & I need to create a pop-up box for their bios. I am a newbie to Squarespace, & have limited coding experience. However, after hours & hours of research, I managed to find/tweak a code that works for 1 leader. However, when I insert another code block for the next leader, it doesn't seem to work & my alignment is getting messed up. Any help would be appreciated.

Step 1: On Page settings -> Advanced -> I inserted the following code: 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />

Step 2: I created a code block and inserted the following code:

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Step 3: Created another code block & inserted the following code: 

<div style="text-align: center; padding: 0;">
  <div style="display: flex; justify-content: left;">
    <div style="width: 85%; max-width: 400px;">
      <a href="#/" data-featherlight="#bio-leader2" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color: #0D3C60; color: #fff; padding: 20px; width: 100%;">
        <span style="font-weight: bold; font-size: larger;">Leader 2 Name</span>
        <br>
        <span style="font-size: smaller; font-style: italic;">Leader 2 Position</span>
      </a>
    </div>
  </div>
</div>

<div style="display: none;">
  <div id="bio-leader2" style="text-align: center; max-width: 600px;">
    <div style="display: flex; align-items: center;">
      <img src="leader2-image-url.jpg" style="max-width: 150px; margin-right: 20px; margin-top: 20px;">
      <div style="text-align: left;">
        <span style="font-weight: bold; font-size: large;">Leader 2 Name</span><br>
        <span style="font-size: smaller; font-style: italic;">Leader 2 Position</span>
      </div>
    </div>
    <div style="text-align: left;">
      <p>Leader 2 bio information goes here.</p>
    </div>
  </div>
</div>