Custom script and Css with lightboxes

I'm designing a site as part of a team for a school magazine, and I work on a PC, whereas my co-designers work on Macs. I designed a page that has an image that, when clicked, presents a lightbox with all text. On my side, the lightbox looks like this

On my co-designer's Mac, the lightbox looks like this:

This is the script that I added to the button, which when clicked, presents the lightbox:

<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>

<a href="#/" data-featherlight="#bio-jordan"><img src="https://static1.squarespace.com/static/5fab03d92e78326e8a6b511f/5fbc085249133c14d6cc24f1/5fbc087ecd07790e0b614af1/1606156785940/X+Small.png?format=100w" alt="X Icon"></a>

<div style="display:none;">
<div id="bio-jordan">
<p>Seems like you decided to swipe left on Jordan... Here’s what you would’ve missed!
  </p>
  <p>
Phew! You're lucky to have missed out on a yogurt date where your date talked about how you sort-of-kind-of-not looked like her best friend that she had a crush on. Shhh. It's a secret. Also, you would've gotten pretty "cozy" after she would've told you about her steamy time hooking up with a random guy in a van in the middle of a corn field.
</p>
</div>
</div>

And this is the CSS that's injected into the page header:

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

<style>
.featherlight:last-of-type{
  background:rgba(215, 23, 49,1);
  color: #000000;}
  
 .squarespace-columns * {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
  padding: 10px;}

.row:after {
    content: "";
    display: table;
    clear: both;
} 
</style>

We also checked to make sure that it wasn't a browser issue. The same problem happens when viewed on a Mac in Chrome, Safari, or Firefox.

Can you share link to page where you use lightbox? We can check easier.

Also you can use this plugin to add lightbox, easy to install/customize without coding skills.

Thank you for your response! I cannot provide a link, as the site is not live yet. Since it's provided by the school, it's also password protected with our school email accounts. We are looking to code any customization on the site, as opposed to buying plugins.

Try this free code. https://codepen.io/mlsf/full/WjVZxY