Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Romaa

  1. 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>
  • 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.