Social Icon in Gallery Caption

Hi all. I am stumped.

I added a social icon image to the bottom of a gallery caption. I used inline html to achieve this. BUT it does not want to stay below the caption text. I wants to go to the top left of the image. I have to use CSS to get it to the bottom center of the caption. I've tried margins, text-align, and a few other obvious codes, but I can't get it to be responsive. Currently, I have this:

.soc-icon { width: 35px!important; height: 35px!important; margin-left: 44%!important; top: 90%!important; }

But it doesn't look good on smaller screens.  And feedback would be awesome. I'd prefer it to just be below the caption, and centered.

Link: https://apricot-cobalt-gt3a.squarespace.com/about-us

PW: TNG

1 hour ago, lindz5223 said:

Hi all. I am stumped.

I added a social icon image to the bottom of a gallery caption. I used inline html to achieve this. BUT it does not want to stay below the caption text. I wants to go to the top left of the image. I have to use CSS to get it to the bottom center of the caption. I've tried margins, text-align, and a few other obvious codes, but I can't get it to be responsive. Currently, I have this:

.soc-icon { width: 35px!important; height: 35px!important; margin-left: 44%!important; top: 90%!important; }

But it doesn't look good on smaller screens.  And feedback would be awesome. I'd prefer it to just be below the caption, and centered.

Link: https://apricot-cobalt-gt3a.squarespace.com/about-us

PW: TNG

It looks fine on my end

Have you figured it out?

I have not. I looks good on a bigger screen but doesn’t look good when the window is scaled down. 

I can see the problem you've got. You have a few options to make this more robust. Having the font size and line height a touch smaller would alter when the description text starts impinging on the LinkedIn icon. You could also edit the break points where the grid changes between 4 columns on desktop and 1 on mobile, CSS something like this:

// 3 columns
media screen and (min-width:900px) and (max-width: 1400px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: 2vw !important;
  }
}
// 2 columns
media screen and (min-width:640px) and (max-width: 900px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 30px !important;
  }
}

You can adjust the min and max on both to suit. Like this above 1400px wide and you'll have 4 columns, 900px - 1400px 3 columns, 640px - 900px 2 columns, and 1 column below 640px.