Arna

@Lesum This thread is fantastic! Thank you! Is there a way to increase the size of the caption container, so that the caption text isn't cut off please? Thank you in advance! (website is https://jaspermountainreserve.org)

Hi @BrandonW. I hope you're doing great! I just posted a similar question here.I would be extremely grateful if you might take a look.

Thank you all for this great thread! I followed it and it's working almost perfectly on my site.

The problem I'm having is in portrait mobile mode (I'm using an iPhone 5s to test). In landscape the mobile view looks great, but in portrait view the right side of the lightbox is clipped off, which includes the close button in the upper right.

Has anyone come across this before? Does anyone have a fix? Thank you in advance!

UPDATE: I figured out that the problem is HTML tables. Tables don't work properly on the smaller smartphone screens, so avoid them in the lightboxes.

Wow @BrandonW. You are truly amazing. Thank you so, so much. The code works perfectly! I am extremely grateful.

Thanks for the reminder about the risk of using custom code. I understand that SquareSpace never recommends futzing with their defaults. However, I'd love to see if someone in the community knows how to make this happen, since lots of people seem to have similar questions.

Lots of folks have asked a similar question in different ways and there don't seem to be answers posted, so I figured I'd try again. This community is such an amazing resource!

I am wondering if there is a way to use CSS to swap the order of blocks in mobile view so that you can specify some blocks to stack right to left rather than the standard left to right. So something like:

 @media only screen and (max-width: 640px) {
  //identify blocks you want to swap and change their order
}

My site is fh-partners.squarespace.com. Here's what I want to do specifically (on the team page):

I really like my desktop arrangement, which is:

<1 picture> <2 text>
<3 text> <4 picture>

Ideally I would like my mobile view to be arranged:

<1 picture>
<2 text>
<4 picture>
<3 text>

But squarespace goes left to right so it ends up as:

<1 picture>
<2 text>
<3 text>
<4 picture>

Is there css to swap blocks 3 and 4 in the mobile view?

Thank you in advance!

I figured out how to match the body font and figured I'd post here for others.

Use this as the code block to create the lightbox:

<div style="display:none;">
<div id="bio-john">
<p>bio text here</p>
  </div>
  </div>
<a href="#" data-featherlight="#bio-john" data-featherlight-variant="fixwidth">Full Bio</a>

Then add this in your custom CSS (where the font styling matches your body text... you can copy and past your own font styling by using "web inspector" and searching for your primary font name until you find the block for regular body font):

.fixwidth .featherlight-content {
   font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
   font-weight: 400 !important;
   font-style: normal !important;
   font-size: 16px !important;
   color: rgba(26,26,26,0.7) !important;
   letter-spacing: 0px !important;
   line-height: 1.6em !important;
}

This is great! Thank you everyone!

Next step: does anyone know how to format the font in the lightbox to match the rest of the body text on the site? I would be forever grateful for help on this.