⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Hi Becca. Is there a way to make the captions appear only when viewing in a lightbox? I'd like it if there weren't any captions visible when viewing the whole page but when you click on individual photos you can see the caption when it opens up in lightbox view. Thanks!
Squarespace just did a HUGE update and certain features are no longer working and my tutorial needs to be updated. You can learn more here: insidethesquare.co/fluid You can also send me a code help request with specifics and I'll see what we can do: insidethesquare.co/code-help
Hi Rebecca, thank you for this video. I have 2 questions. I hope you will understand my Frenglish. 1. the image caption displays the description I previously typed for the image. This description is good for SEO but I think it's too long for an image caption. Is there a way to make the image caption just a few words long, while keeping the longer image description for the SEO? 2. thanks to your code I managed to change the first line of the image caption from Georgia font to Europa font but the second line is still in Georgia. What piece of code do I need? Thank you very much if you can find a minute to reply!
Hey there! 1) The alt text description should be written to aid accessibility for your site. Keep it as direct and to the point as possible. I don't recommend key word stuffing for SEO, and the length shouldn't be excessively long. 2) This tutorial should help you out! insidethesquare.co/squarespace-tutorials/custom-font-in-squarespace
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
Intersting question! You can use a negative top margin to pull it above the image, like this: .gallery-caption { margin-top:-150px } This will move any images below up a bit so you can also add a padding to the bottom to offset the change, like this: .gallery-caption { margin-top:-150px; padding-bottom: 150px }
Hey Super Panda! I do my best to update the Cheat Sheet at least once a year, sometimes more frequently for really major updates (like the release of version 7.1!) When you purchase my CSS cheat sheet, you'll be emailed updated versions when they are released. 👍👍
Hi Becca! Sorry for this question that has nothing to do with the video, but do you know if it is possible to insert a chat from a youtube live stream in the squarespace?
Hey Angelica! I have no idea - but probably?? 😬 If it's an or other type of embedded code you should be able to place it inside a code block. Hope that info helps!
Hi Becca, Thank you very much for this helpful video! One question, in this same example, how can I increase the font size of all the lines of the caption, not just the "first-line"? Thank you 🙂 and kind wishes!
Great question Daniel! Or that you can just remove the first-line part of the code and target the whole thing... BUT you need to make sure you label your code !important or the browser might ignore it! Try changing up the 20px in this code to the font size you want to use. .gallery-caption p {font-size:20px!important}
Hey Tanner! Unfortunately in CSS we can only target first line, not second or third. If you are using a gallery section that's a grid style, you can use image blocks instead and get a lot more functionality using text types and targeting those! Hope that concept helps with your project 👍👍
Your tutorials have been sooooo helpful and I just really want to say THANK YOU before I ask: Is there a way to change the position of the image description to *below* the image (above the thumbnails) rather than it being over the image?
Thanks so much for your comment- it made my day! Now, Squarespace just did a HUGE update and certain features are no longer working. You can learn more here: insidethesquare.co/fluid where I discuss the changes in how images are used in Squarespace.
Thanks so much for this info! It totally did what I needed it to do, however when I put in the .gallery-caption p {white-space:pre}, it widens the gallery width. Perhaps I am doing something wrong, but if not, is there are way to keep this from happening? Thank you in advance for your help.
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Hi Becca. Thanks for this great tutorial. I'm having some issues with one thing. We are trying to add a Partners logo gallery, grid style, but want our partners' social media icons with links in the captions. Is there a workaround for this? Thanks!
Oooh taht is tricky - I'm assuming more than one social link for each partner? I would look into a plugin for this. Maybe you can try the lightbox anything plugin from Sqsp themes - here is my affiliate link: transactions.sendowl.com/stores/9483/187099
Something I'm trying to understand. Let's say I need to design a new website for a client, do the client needs to give me access to his squarespace account or I can start building the website on my account and then transfer it to his account? Another question; To join Squarespace Circle you must have 3 websites built using Squarespace, how can I prove I have them?
Hi Becca. This was very helpful. Is there way to bold specific words in the caption? And the soft return was helpful but if I have one line of long text it no longer wraps around to the next line if it goes beyond the width of the image. How can I fix this? Thanks
Hey Ray! You can use HTML in your text to create bold text like this: normal text this part is bold this part isn't. Not sure about the extra long text part; I'll have to brainstorm about it. Stay tuned.
Amazing video! Thank you so much for sharing this with Squarespace users! I have a question: If I had three separate lines of text, how would I make the first two lines bold and the same size, then the last line smaller and not bold? I tried your instructions and it worked for sure but I can't figure out how to make the second line of my text just like the first line. Thank you in advance too!
Hi Becca, thanks for creating such great content! I have a question about the gallery caption though. How can I make it on top of the image so it's floating? When I move the text, it disappears behind the image instead of getting on top of it. Do you know how this could work? Thanks in advance :)
Hey Celine! It can be reset with a Z-Index. Kinda complicated to explain via email but feel free to reach out to me directly and I'll send over a quick step by step for ya. You can reach me anytime at support-at-insidethesquare.co
Hi there Becca, a quick query, this didn't work for me. I'm using a rolling Slideshow gallery with full span images and the captions are way too small, I've tried this but no luck - any ideas? Thank you in advance!
Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage
Hey Linda! It sounds like you are using a portfolio with projects, and not a gallery section. Projects are full pages that are inside portfolios, with the project thumbnail displaying on the portfolio pae; here is an overview video: ruclips.net/video/oKHtxMeUrVA/видео.html Gallery sections are a type of page section that is on a page. Here is an overview of those: ruclips.net/video/QbQaKXCKkD4/видео.html Hope that info helps!
How do I change the text size if I have only one line of text? If the caption is too long it will break into a second line and the format will not be applied. However the code doesn't work if I remove the part saying "first-line".
Hi there, thanks a lot for this! My site will only show these changes for a split second after saving and refreshing the page, not whilst editing, not after refreshing. Tried clearing cache and in different browsers. What do you suggest? Thanks a million.
That is super strange 🤔 I am not sure why it would be doing that but I am happy to hop in behind the scenes to see what I can do to help! Feel free to submit a code help request anytime at insidethesquare.co/code-help
Hi! I'm having trouble with my paragraph of text being cut off when i apply .gallery-caption p{white-space:pre; padding: .2rem} I want there to be separate lines of text to differentiate from HEADING to body but the body is not running off the frame and not being contained. if that makes sense!
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Not sure if this helps your situation but I have found that the cut off parts only appear cut off in edit mode and when I hit save and look at my site as it appears to visitors there is no issue.
hello there! Love this tutorial. One additional question I had about captions. How do I make a caption appear on the image instead of underneath the image with css? thank you!
That's a great question! CSS stands for cascading style sheet; it's what defines the style of your site. CSS is what tells the browser the font family, font size, and style of your caption. Creating a new function - like making it clickable - requires a different kind of code known as javascript. I don't mess with javascript because it can change the way Squarespace works, but some Squarespace users do! I would recommend posting in the Squarespace forum (forum.squarespace.com) to see if anyone has made a clickable caption plugin. Best of luck!
Oooh that is a tricky one! CSS just changes the style of a site, but adding functionality like that would require some additional codes. I'll have to think about that and get back to you 🤔
Hi there thank you for sharing this video, I was able to change the font color and hightlight color of the first line with this. Is there a way to also edit the spacing between the lines of text?
Hi Becca, thanks so much for this tutorial. It worked like a charm for my desktop view, but when I view on mobile the text is too big, how can I keep the desktop size but edit text sizing on mobile view to be smaller? Thank you!
Hey Jamie! You can change the size specifically on mobile using a 'media query" - a fancy way of telling the browser to make a style change only for a specific screen size. I have more info about that here: insidethesquare.co/squarespace-mobile-codes
Hi!! Thank you so much for this video, it's incredibly helpful. I'm not sure if Squarespace has updated again, but I cannot for the life of me get the code to work. I'm able to put it into Custom CSS but it will not populate on my Gallery. Any tips?
They do update things all the dang time but i just took a look at this code in my demo site, and it's still good, so I'm not sure why it wont work well on yours! Here are some testing tips: 1 - add the code to the beginning of your CSS file, before any other code, to make sure it's not getting trapped in a media query, note, or other space that would render it invalid 2 - add the code to the end of your CSS and use !important after each value to make sure it will overwrite any other code in your custom css 3 - remove all the properties and values and add border: 5px solid red. If a border shows up around the captions, you've got the right selector. if it doesn't, update the selector for the captions 4 - if none of those work, email me a link so I can take a look! You can reach me directly (support-at-insidethesquare.co) and make sure your site is set to password protected under settings > site availability > password protected
@@InsideTheSquare thank you so much for the quick reply! I figured it out -- I was working on a gallery block, not section. Once I added a gallery section the code showed up :) thanks again!!
Hi! This is soooo helpful! However, it changes how the gallery looks on mobile. I'm using the grid:simple gallery mode and instead of a same size images, the code makes the images different sizes. Any tips on how to fix this? Thanks!!
Great question! Totally fixable with CSS. The code is a bit complicated for a comment but I’ll be sure to add this to my tutorial to do list so stay tuned! 🙌
is there anyway i can number each photo without having to directly click on each one? i dont want to have to click each photo and place 1, 2, 3 etc on each photo.
That kind of feature isn’t something we can change with CSS, but the official support articles at Squarespace might be of help: support.squarespace.com/
Thanks for the great tutorial! We are having issues in SquareSpace 7.1. Our captions are being cut off on a Gallery Block on mobile with our custom code. We have the mobile code, but haven't figured out how to get the type to bump to the next line. any insight would be appreciated. tia!
Interesting - I haven’t encountered this yet!! I’ll have to brainstorm a code fix; a responsive sized caption space OR a quick text wrap could be a good workaround 🤔 stay tuned
Great question Ayende - and yes! You can use the selector "gallery-caption p" to change the font size, like this code below. Adjust he 12px to whatever font size you want it to be 😁 .gallery-caption p {font-size: 12px!important}
Great question - and yes! You can change the padding top to 0 to remove any space between the caption and the image. Give this code a try: .gallery-caption{padding-top:0px}
Cool stuff. I have a "full gallery" and want the caption to be in the middle of the image as an overlay. Pretty much like it is on a full bleed headline section. Any ideas how to do that?
Hey Becca, this worked perfectly for a website i was building, but then we started seeing little outlined boxes where the soft returns were. Have you ever seen this happen?
Hi Zubair! Thanks for sending over your suggestions! I have a big list of ideas I am working off of but no specific schedule or timeline for the ideas that make the cut.
Kinda - it depends on what you mean by more than one line! 😅 if you want each caption to be a different style, you can use an nth-of-type targeting, and if you want multiple font syles in one caption, you can have two different ones by targeting the first line with the :first-line selector. Hope that info helps and best of luck with your project!
Nope - all you can do is link the image. CSS only changes the style of a site, not the way it works, so you would need to develop some kind of javascript plugin for that. I'd recommend posting on the Squarespace forums to see if anyone sells one, because i bet other Squarespacers would love that feature too!
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Hi Becca. Is there a way to make the captions appear only when viewing in a lightbox? I'd like it if there weren't any captions visible when viewing the whole page but when you click on individual photos you can see the caption when it opens up in lightbox view. Thanks!
Squarespace just did a HUGE update and certain features are no longer working and my tutorial needs to be updated. You can learn more here: insidethesquare.co/fluid
You can also send me a code help request with specifics and I'll see what we can do: insidethesquare.co/code-help
Hi Rebecca, thank you for this video.
I have 2 questions. I hope you will understand my Frenglish.
1. the image caption displays the description I previously typed for the image. This description is good for SEO but I think it's too long for an image caption. Is there a way to make the image caption just a few words long, while keeping the longer image description for the SEO?
2. thanks to your code I managed to change the first line of the image caption from Georgia font to Europa font but the second line is still in Georgia. What piece of code do I need?
Thank you very much if you can find a minute to reply!
Hey there!
1) The alt text description should be written to aid accessibility for your site. Keep it as direct and to the point as possible. I don't recommend key word stuffing for SEO, and the length shouldn't be excessively long.
2) This tutorial should help you out! insidethesquare.co/squarespace-tutorials/custom-font-in-squarespace
In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out insidethesquare.co/fluid
just wanted to say thank u you helped me out on so many problems!
You are so welcome! 🥰
I would like to have the text in the image itself. How can I do that?
Intersting question! You can use a negative top margin to pull it above the image, like this:
.gallery-caption {
margin-top:-150px
}
This will move any images below up a bit so you can also add a padding to the bottom to offset the change, like this:
.gallery-caption {
margin-top:-150px;
padding-bottom: 150px
}
@@InsideTheSquare, thank you for getting back with me. I will try this out for sure!
Hey there! Do you provide regular updates after I purchasing the CSS CHEAT SHEET? Thank you.
Hey Super Panda! I do my best to update the Cheat Sheet at least once a year, sometimes more frequently for really major updates (like the release of version 7.1!) When you purchase my CSS cheat sheet, you'll be emailed updated versions when they are released. 👍👍
@@InsideTheSquare Awesome!! Thanks))
Hi Becca! Sorry for this question that has nothing to do with the video, but do you know if it is possible to insert a chat from a youtube live stream in the squarespace?
Hey Angelica! I have no idea - but probably?? 😬 If it's an or other type of embedded code you should be able to place it inside a code block. Hope that info helps!
Hi Becca, Thank you very much for this helpful video! One question, in this same example, how can I increase the font size of all the lines of the caption, not just the "first-line"? Thank you 🙂 and kind wishes!
Great question Daniel! Or that you can just remove the first-line part of the code and target the whole thing... BUT you need to make sure you label your code !important or the browser might ignore it! Try changing up the 20px in this code to the font size you want to use.
.gallery-caption p {font-size:20px!important}
@@InsideTheSquare Cool, works great! Thank you so much Becca 🙂✌Best wishes!!
@insidethesquare is there a way to auto-wrap a long caption? soft returns act screwy at different breakpoints. thanks!
That's super strange - the container should prevent that from happening! Try adjusting the width or setting an overflow parameter.
Hi Becca. How would I change the text size of the second and third lines? I tried second-line, next-line, etc. Can't get it to work! Thanks!
Hey Tanner! Unfortunately in CSS we can only target first line, not second or third. If you are using a gallery section that's a grid style, you can use image blocks instead and get a lot more functionality using text types and targeting those! Hope that concept helps with your project 👍👍
Your tutorials have been sooooo helpful and I just really want to say THANK YOU before I ask: Is there a way to change the position of the image description to *below* the image (above the thumbnails) rather than it being over the image?
Thanks so much for your comment- it made my day! Now, Squarespace just did a HUGE update and certain features are no longer working. You can learn more here: insidethesquare.co/fluid where I discuss the changes in how images are used in Squarespace.
YOU ARE A ROCKSTAR and a total life saver! Thanks for this video!
You are so welcome - happy to help!
Thanks so much for this info! It totally did what I needed it to do, however when I put in the .gallery-caption p {white-space:pre}, it widens the gallery width. Perhaps I am doing something wrong, but if not, is there are way to keep this from happening? Thank you in advance for your help.
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
I was here to figure out how to adjust the leading on my site and you solved my problem - soft return! duh. Thank you so much!
Heck yeah! So glad that my work is helping you with yours! Good luck on your project!
Awesome! Your tutorials are really well made
Thank you so much! I'm doing my best 🥰
Hi Becca. Thanks for this great tutorial. I'm having some issues with one thing. We are trying to add a Partners logo gallery, grid style, but want our partners' social media icons with links in the captions. Is there a workaround for this? Thanks!
Oooh taht is tricky - I'm assuming more than one social link for each partner? I would look into a plugin for this. Maybe you can try the lightbox anything plugin from Sqsp themes - here is my affiliate link: transactions.sendowl.com/stores/9483/187099
Something I'm trying to understand. Let's say I need to design a new website for a client, do the client needs to give me access to his squarespace account or I can start building the website on my account and then transfer it to his account? Another question; To join Squarespace Circle you must have 3 websites built using Squarespace, how can I prove I have them?
Hey Super Panda! Those are some pretty specific questions about the Squarespace itself - i would recommend reaching out to Squarespace support 👍👍
Hi Becca. This was very helpful. Is there way to bold specific words in the caption? And the soft return was helpful but if I have one line of long text it no longer wraps around to the next line if it goes beyond the width of the image. How can I fix this? Thanks
Hey Ray! You can use HTML in your text to create bold text like this:
normal text this part is bold this part isn't.
Not sure about the extra long text part; I'll have to brainstorm about it. Stay tuned.
Amazing video! Thank you so much for sharing this with Squarespace users!
I have a question: If I had three separate lines of text, how would I make the first two lines bold and the same size, then the last line smaller and not bold?
I tried your instructions and it worked for sure but I can't figure out how to make the second line of my text just like the first line.
Thank you in advance too!
Aww, thanks Dale! Feel free to submit a code help request here: insidethesquare.co/code-help and I'll see what I can do!
@@InsideTheSquare You're so welcome and thank you for helping people like myself too! I'll send my request as well, thanks!
Hi Becca, thanks for creating such great content! I have a question about the gallery caption though. How can I make it on top of the image so it's floating? When I move the text, it disappears behind the image instead of getting on top of it. Do you know how this could work?
Thanks in advance :)
Hey Celine! It can be reset with a Z-Index. Kinda complicated to explain via email but feel free to reach out to me directly and I'll send over a quick step by step for ya. You can reach me anytime at support-at-insidethesquare.co
@@InsideTheSquare The link doesn't work anymore - wish you had written the CSS code on your comment :)
Having that issue too
THANK YOU! Exactly what I needed.
You're welcome - glad it helped!
You're amazing! This is just what I was looking for.
Yay! So happy I could help :)
Hi there Becca, a quick query, this didn't work for me. I'm using a rolling Slideshow gallery with full span images and the captions are way too small, I've tried this but no luck - any ideas? Thank you in advance!
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
@@InsideTheSquare Thanks Becca, I sent you the details a couple of days ago! If you do get the chance to take a look I'd appreciate it
what if i want this on one of my pages but not one the other ones? does the custom CSS apply to the whole site?
Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage
There is no picture icon when I go to edit mode on my gallery. Only manage project and edit section. What am I doing wrong?
Hey Linda! It sounds like you are using a portfolio with projects, and not a gallery section. Projects are full pages that are inside portfolios, with the project thumbnail displaying on the portfolio pae; here is an overview video: ruclips.net/video/oKHtxMeUrVA/видео.html
Gallery sections are a type of page section that is on a page. Here is an overview of those: ruclips.net/video/QbQaKXCKkD4/видео.html
Hope that info helps!
How do I change the text size if I have only one line of text? If the caption is too long it will break into a second line and the format will not be applied. However the code doesn't work if I remove the part saying "first-line".
Using the property font-size will change the font size, like this: .gallery-caption p {font-size: 12px}
@@InsideTheSquare Thanks for your reply, unfortunately that doesn't work, it changes nothing. Any idea??
Hi there, thanks a lot for this! My site will only show these changes for a split second after saving and refreshing the page, not whilst editing, not after refreshing. Tried clearing cache and in different browsers. What do you suggest? Thanks a million.
That is super strange 🤔 I am not sure why it would be doing that but I am happy to hop in behind the scenes to see what I can do to help! Feel free to submit a code help request anytime at insidethesquare.co/code-help
This helped so much! Thank you!
You’re welcome! Happy to help. 😎
You always give useful tips and fun ideas 😀 Thank you!!!
You are so welcome Meagan! 🥰
Hi! I'm having trouble with my paragraph of text being cut off when i apply .gallery-caption p{white-space:pre; padding: .2rem}
I want there to be separate lines of text to differentiate from HEADING to body but the body is not running off the frame and not being contained. if that makes sense!
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Not sure if this helps your situation but I have found that the cut off parts only appear cut off in edit mode and when I hit save and look at my site as it appears to visitors there is no issue.
hello there! Love this tutorial. One additional question I had about captions. How do I make a caption appear on the image instead of underneath the image with css? thank you!
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Great info! Thank you so much!
You are so welcome Anne - happy to help! :)
is the CSS for the second line the same here: .gallery-caption p:second-line {color: blue; font-size: 1rem; font-weight:bold}
Nope! Sorry to be the bearer of bad news, but there is no "second-line" targeting in CSS for any website; only first line and first letter.
Hi! Is there a way to hyperlink the caption to the same destination link as the image? Is that something customizable in CSS?
That's a great question! CSS stands for cascading style sheet; it's what defines the style of your site. CSS is what tells the browser the font family, font size, and style of your caption. Creating a new function - like making it clickable - requires a different kind of code known as javascript. I don't mess with javascript because it can change the way Squarespace works, but some Squarespace users do! I would recommend posting in the Squarespace forum (forum.squarespace.com) to see if anyone has made a clickable caption plugin. Best of luck!
@@InsideTheSquare Thank you so much!!
Thank you! Can you discuss how to have grid gallery captions also display in the lightbox?
Oooh that is a tricky one! CSS just changes the style of a site, but adding functionality like that would require some additional codes. I'll have to think about that and get back to you 🤔
Hi there thank you for sharing this video, I was able to change the font color and hightlight color of the first line with this. Is there a way to also edit the spacing between the lines of text?
Great question and yes! Try using the property line-height to adjust it, like this:
line-height: 15px;
Hi Becca, thanks so much for this tutorial. It worked like a charm for my desktop view, but when I view on mobile the text is too big, how can I keep the desktop size but edit text sizing on mobile view to be smaller? Thank you!
Hey Jamie! You can change the size specifically on mobile using a 'media query" - a fancy way of telling the browser to make a style change only for a specific screen size. I have more info about that here: insidethesquare.co/squarespace-mobile-codes
@@InsideTheSquare ahhh, thank you so much! 🙏
Hi!! Thank you so much for this video, it's incredibly helpful. I'm not sure if Squarespace has updated again, but I cannot for the life of me get the code to work. I'm able to put it into Custom CSS but it will not populate on my Gallery. Any tips?
They do update things all the dang time but i just took a look at this code in my demo site, and it's still good, so I'm not sure why it wont work well on yours! Here are some testing tips:
1 - add the code to the beginning of your CSS file, before any other code, to make sure it's not getting trapped in a media query, note, or other space that would render it invalid
2 - add the code to the end of your CSS and use !important after each value to make sure it will overwrite any other code in your custom css
3 - remove all the properties and values and add border: 5px solid red. If a border shows up around the captions, you've got the right selector. if it doesn't, update the selector for the captions
4 - if none of those work, email me a link so I can take a look! You can reach me directly (support-at-insidethesquare.co) and make sure your site is set to password protected under settings > site availability > password protected
@@InsideTheSquare thank you so much for the quick reply! I figured it out -- I was working on a gallery block, not section. Once I added a gallery section the code showed up :) thanks again!!
Hi! This is soooo helpful! However, it changes how the gallery looks on mobile. I'm using the grid:simple gallery mode and instead of a same size images, the code makes the images different sizes. Any tips on how to fix this?
Thanks!!
Great question! Totally fixable with CSS. The code is a bit complicated for a comment but I’ll be sure to add this to my tutorial to do list so stay tuned! 🙌
is there anyway i can number each photo without having to directly click on each one? i dont want to have to click each photo and place 1, 2, 3 etc on each photo.
That kind of feature isn’t something we can change with CSS, but the official support articles at Squarespace might be of help: support.squarespace.com/
Thanks for the great tutorial! We are having issues in SquareSpace 7.1. Our captions are being cut off on a Gallery Block on mobile with our custom code. We have the mobile code, but haven't figured out how to get the type to bump to the next line. any insight would be appreciated. tia!
Interesting - I haven’t encountered this yet!! I’ll have to brainstorm a code fix; a responsive sized caption space OR a quick text wrap could be a good workaround 🤔 stay tuned
hello
is there a way to make subsequent lines a different size? thx
Great question Ayende - and yes! You can use the selector "gallery-caption p" to change the font size, like this code below. Adjust he 12px to whatever font size you want it to be 😁
.gallery-caption p {font-size: 12px!important}
Do you have the code to make the caption closer to the photo?
Great question - and yes! You can change the padding top to 0 to remove any space between the caption and the image. Give this code a try:
.gallery-caption{padding-top:0px}
Cool stuff. I have a "full gallery" and want the caption to be in the middle of the image as an overlay. Pretty much like it is on a full bleed headline section. Any ideas how to do that?
Hi Martin! Try to adjust the padding, and if that doesn't work, feel free to submit a request for code help: insidethesquare.co/code-help
Hey Becca, this worked perfectly for a website i was building, but then we started seeing little outlined boxes where the soft returns were. Have you ever seen this happen?
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
SO HELPFUL.
Awesome - thanks for letting me know! 🥰
How do I change the font size to include the whole caption, not just first-line?
You can remove :first-line from your code, so you're targeting the whole .gallery-caption
Becca tha Ks for the video btw I submitted my request for some of tutorials, when I can expect them?
Hi Zubair! Thanks for sending over your suggestions! I have a big list of ideas I am working off of but no specific schedule or timeline for the ideas that make the cut.
And how can i make the text itself smaller?
You can apply any text value using the font-size property like this:
font-size: 12px!important
is there anyway to hide the caption but have it appear when the lightbox is activated?
You should be able to toggle that in your lightbox menu.
I can't find this code anywhere under the video?
Click on "...more" to open the video description here on RUclips - I have all of the codes listed there for you to copy and paste.
Can more than one line be customized?
Kinda - it depends on what you mean by more than one line! 😅 if you want each caption to be a different style, you can use an nth-of-type targeting, and if you want multiple font syles in one caption, you can have two different ones by targeting the first line with the :first-line selector. Hope that info helps and best of luck with your project!
Is there a code for making the gallery caption text into a link?
Nope - all you can do is link the image. CSS only changes the style of a site, not the way it works, so you would need to develop some kind of javascript plugin for that. I'd recommend posting on the Squarespace forums to see if anyone sells one, because i bet other Squarespacers would love that feature too!
Thank you soooo much :)
You're welcome! :)
Thank You!!!!!
You're welcome! :)
Thanks!
You’re welcome George!
We closer to Mars than I thought lol 😉
You're welcome - happy to help! 😁
I love you