Jump to content

Social Icon in Gallery Caption

Recommended Posts

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

Screen Shot 2022-11-02 at 5.56.40 PM.png

Screen Shot 2022-11-02 at 5.56.32 PM.png

Screen Shot 2022-11-02 at 5.57.42 PM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

Screen Shot 2022-11-02 at 5.56.40 PM.png

Screen Shot 2022-11-02 at 5.56.32 PM.png

Screen Shot 2022-11-02 at 5.57.42 PM.png

It looks fine on my end

image.thumb.png.55c7a0ec582a21a843f111a05ad9a494.png

Have you figured it out?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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