Using Featherlight Lightbox (text not displaying)

Hello,

I'm trying to use the lightbox from featherlight but I'm having issues getting the text to display. See screenshot to see what it's outputting.

In my global header:

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

In my global footer:

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

Code Block:

<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#000; color:#fff; padding:20px 20px;">View John's Bio</a>
</div>

<div style="display:none;">
<div id="bio-john" style="text-align:center; color:#000;">
<img src="https://static1.squarespace.com/static/58bcc3b8db29d66bb3b919f0/58c01070893fc05ff99c2f77/5b6c88fd21c67c3d1c61e73d/1533839615985/john-smith-bio-picture.png" alt="John Smith" />
<p>John Smith grew up in a small town in Michigan and later moved to Florida. He attended school at Vandelay Industries College and went on to work for the New York Yankees.</p>
</div>
</div>

https://hudcostreets.org/team-preview

page password: test1234

Thanks!

What is your site url?

5 hours ago, tuanphan said:

What is your site url?

https://hudcostreets.org/team-preview

You can use this code to Website > Website Tools > Custom CSS.

div.featherlight-content p {
    opacity: 1 !important;
}

On 6/12/2024 at 4:32 AM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS.

div.featherlight-content p {
    opacity: 1 !important;
}

Thank you! I'm about 95% done with my page but I need suggestions on how to make the lightbox optimally sized for mobile. It looks great on desktop but it tends to get off cut off on the right hand side when in mobile preview.

Here's the CSS styling I'm using:

/* START LIGHTBOX STYLING */
.featherlight-content {
  max-width: 800px; /* Adjust the width as needed */
  margin: 0 auto;
}

.featherlight-inner {
  padding: 20px; /* Optional: Add padding if needed */
}
/* END LIGHTBOX STYLING */