Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'caption'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers ๐Ÿ‡ซ๐Ÿ‡ท's Topics
  • France Designers ๐Ÿ‡ซ๐Ÿ‡ท's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi there, I am trying to align the captions to a slideshow to the left using Simple Slideshow gallery. I am using the following css code but the text doesn't align with the left border of the image. However the same slideshow as a simple grid view is aligned correctly, but the text is cut out. .gallery-caption p {white-space:pre; text-align:left} .gallery-caption-wrapper { display: flex; place-items: left; justify-content: left; } See attached. Does anyone have a similar issue and a solution? Thanks!
  2. Site URL: https://cod-goby-e96y.squarespace.com/ I'm building a Squarespace 7.1 site and need to show the gallery captions under the lightbox images. This is more difficult than I thought. Can anyone help point me to the CSS code I would need to do this? Thanks!
  3. When using lightbox, i have a small dot in the bottom to show captions (within the image). however, it is too small and nobody can find it. is there a special css code to always show the caption when opened in lightbox?
  4. Site URL: https://www.lisawolffmcintyre.com/blog/tampa-bays-25-highest-dollar-home-sales-in-2021 I'm looking for code to reduce padding between lines when using different fonts in a caption. In the reference pic, the first font is H2 and the second is P3. I don't want there to be quite so much space between the two fonts. THANK YOU, SQUARESPACERS!
  5. Site URL: https://owl-buffalo-afdc.squarespace.com/ Hello, I've been googling this issue for the past few days and can't seem to figure it out. If anyone could help me with this that would be greatly appreciated. When I create a blank template and add a gallery section with a full-bleed slideshow reel, there is a large blank space below the gallery. This appears whenever I turn the caption on. If i turn the caption off, there is no space below. I must have tried 100 different solutions suggested in other threads to remove this blank space and none have worked for me. PS. I am using the following code to move the caption from below the image to on top of the image, but the problem remains the same with or without this code: .gallery-caption { position: static; } .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 1 !important; color: #fff; font-size:1.2rem!important } Site: https://owl-buffalo-afdc.squarespace.com/ PW: ilovelamp What it looks like (i marked the blank space i want to remove with a red box): What i'm trying to achieve (no blank space under gallery):
  6. Site URL: https://iguana-koala-m4dj.squarespace.com/ Password: gallerycaption Hi, I asked this question once before, but I think my question was too complicated. So I am trying again! When you add a gallery section with a full-bleed slideshow reel and activate captions, the caption area it adds is too big. I cannot figure out how to change the size of this caption area. I know how to edit the actual text in the caption, but not the area around it. Without captions enabled: With captions enabled: How do i decrease the padding/height below the caption? (the white area)
  7. Site URL: https://www.thecreativebloc.co.uk/ Hi There! I have added some css code to change my gallery captions, however they are not responsive and are very strange when viewing on mobile or at different sizes. Can you help at all? I have used a lot of css in my website but don't really understand it enough to fix this. This is the code i have in there relating to these captions etc. I may have doubled up on this but have lost track of what bit were important! Thank you so much, Capella // Gallery Caption Text // .gallery-section .gallery-caption p { text-align: center; font-size: 50px; font-weight: 0; color: #FDFCF8; text-transform: normal; line-height: 1.2em; font-family: SpaceGrotesk; } .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(25,25,25,1); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1.5rem !important; /* caption font size */ color: #FDFCF8; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } .sqs-block.image-block { padding: 0; } .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: relative; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 18px !important; font-weight: semibold !important; color: #EEF281 !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #191919; opacity: 1; } /* Image Captions on Hover*/ .image-caption-wrapper { min-height: 100%; display: flex; align-items: center; /*vertically centered */ justify-content: center; /*text align center*/ background: rgba(25, 25, 25, 1) !important; /* Background Overlay*/ } .image-caption-wrapper p { color: red !important; /* font color of caption */ }
  8. Site URL: https://pomegranate-chiton-cwwe.squarespace.com/paintings I have added custom css and java to this artistโ€˜s website for the gallery captions to display only in Lightbox. Many have long captions but the full length is no longer displaying in Lightbox as it was originally. pw: LFLF2021 Can someone help me with the code? TY!
  9. Site URL: https://sheep-sparrow-jj63.squarespace.com/ Hi everyone, Looking for a solution to showing the captions of the images only when they are in a lightbox - I want the caption to show beneath the image. I've tried a number of similar solutions asked by others previously but to no avail. https://sheep-sparrow-jj63.squarespace.com/ Password - annabubba Many thanks, Yva
  10. Site URL: http://www.hellomosocial.com Hi! I'm finally switching over to 7.1. We used to do a lot of "split screens" where we'd add a gallery, keep it limited to two images, and then add the caption to the center of a solid background or image so it looks like the attached. Cannot figure out how to do this in 7.1. Any ideas??
  11. Site URL: https://tmha-new-site.squarespace.com/portfolio/bride password: tamara I'm trying to code this so that the photographer info shows up nice and small just on a hover. Does that make sense?
  12. Site URL: https://apple-wedge-pywm.squarespace.com/ Hi, I already have this code for my site .meta .sqs-active-slide{opacity:15} .collection-type-gallery.hide-meta .meta{bottom:40px;right:40px;background:none}.collection-type-gallery.hide-meta .meta .slide{max-height:600vh;max-height:-webkit-calc(600vh - 80px);max-height:calc(600vh - 80px)}.collection-type-gallery .meta .image-desc{color:#fff}.meta-hovered .sqs-active-slide,.meta-visible .sqs-active-slide,.meta-hovered:hover .sqs-active-slide{opacity:1 !important}.collection-type-gallery.gallery-controls-simple .meta #simpleControls{position:fixed;bottom:0;left:220px;padding:10px 0} .collection-type-gallery.gallery-controls-simple .meta #simpleControls .prev-slide{display:inline-block;vertical-align:middle;padding-left:20px;background:url(http://static1.squarespace.com/static/55f8f7e9e4b065c11d2e4b1b/t/5645b38ee4b0ba265cdd44d7/1447408526688/ico-arrow-prev.png) no-repeat 0 5%;background-size:auto 100%} .collection-type-gallery.gallery-controls-simple .meta #simpleControls .next-slide{display:inline-block;vertical-align:middle;padding-right:20px;background:url(http://static1.squarespace.com/static/55f8f7e9e4b065c11d2e4b1b/t/5645b3fbe4b014628275aabc/1447408635233/ico-arrow-next.png) no-repeat 100% 5%;background-size:auto 100%} .collection-type-gallery.hide-meta .meta .thumbnail-toggle{position:fixed;bottom:0;left:350px;padding:10px 0 10px 20px;background:url(http://static1.squarespace.com/static/55f8f7e9e4b065c11d2e4b1b/t/5645ababe4b0ee452876c215/1447406507604/ico-thumbs.png) no-repeat 0 49%} .collection-type-gallery.hide-meta .meta .image-desc{padding-bottom:10px}.collection-type-gallery.enable-gallery-thumbnails .overlay-controls.center-control{cursor:url(http://static1.squarespace.com/static/55f8f7e9e4b065c11d2e4b1b/t/564d8e4de4b0cc5a62e4309d/1447923277907/ico-thumbs-large.png),auto}.user-added-controls{font-family:"proxima-nova";font-size:12px;line-height:1.2;text-transform:uppercase;position:fixed;bottom:0;left:470px;z-index:15}.user-added-controls .fullscreen-toggle,.user-added-controls .share-toggle,.user-added-controls .caption-toggle{display:inline-block;padding:10px 0 10px 20px;margin-left:20px;vertical-align:middle;background-repeat:no-repeat;background-position:0 50%;cursor:pointer}.image-desc-toggle{display:none}.collection-type-gallery .overlay-controls.left-control{cursor:url(http://static1.squarespace.com/static/55f8f7e9e4b065c11d2e4b1b/t/5645b38ee4b0ba265cdd44d7/1447408526688/ico-arrow-prev.png),auto} grid.loaded:after{opacity:0}.grid .thumb{width:calc(25% - 10px);margin-left:10px;margin-bottom:10px;opacity:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}.grid.loaded .thumb{opacity:1}.grid .thumb a{position:relative;display:block}.grid .thumb img{width:100%;height:auto}.grid .thumb .thumb-caption{position:static;bottom:0;left:0;right:0;padding:5px 14px;background:#000;opacity:.6;color:#fff;font-family:"futura-pt",sans-serif;font-size:20px;line-height:1.2;text-align:right;font-weight:300} .collection-type-gallery .meta .thumbnail-toggle{position:absolute;bottom:0;left:350px;margin:0;padding:10px 0 10px 20px;background:url(http://static1.squarespace.com/static/55f8f7e9e4b065c11d2e4b1b/t/5645ababe4b0ee452876c215/1447406507604/ico-thumbs.png) no-repeat 0 49%} .collection-type-gallery .meta{left:auto;width:auto;max-width:170px;z-index:9999;bottom:40px;right:40px;background:none}.collection-type-gallery .meta .slide{max-height:90vh;max-height:calc(100vh - 80px);overflow-x:hidden;overflow-y:auto;background:rgba(0,0,0,.6)}.collection-type-gallery .meta .image-desc{padding:15px 15px 10px}.collection-type-gallery #slideshow .slide{background-repeat:no-repeat;background-position:center center;-webkit-background-size:contain;background-size:contain}@media (min-width:801px){.sqs-gallery-design-stacked-slide.sqs-gallery-design-stacked-slide img.horizontal{width:100% !important;max-height:none !important}.sqs-gallery-design-stacked-slide.sqs-gallery-design-stacked-slide img.vertical{height:100% !important;max-width:none !important}}@media (max-width:1740px){.grid .thumb{width:calc(33.3% - 10px)}}@media (max-width:1377px){.grid .thumb{width:calc(50% - 10px)}}@media (max-width:1023px){.grid .thumb{width:calc(100% - 10px)}}@media only screen and (max-width:800px){.image-desc-toggle{font-size:20px;text-align:right;line-height:20px;padding:0 10px;display:block;cursor:pointer}#slideshowWrapper #slideshow .slide{position:relative !important;top:auto;left:auto;overflow:hidden}.collection-type-gallery #slideshow .slide .image-desc-mobile{opacity:0;position:absolute;top:0;bottom:20px;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 10px 1px;margin:0;background-color:rgba(0,0,0,.6);color:#fff;-webkit-transform:translatey(150%);transform:translatey(150%);-webkit-transition:opacity .4s ease,-webkit-transform .4s ease-in-out;transition:opacity .4s ease,transform .4s ease-in-out}.collection-type-gallery #slideshow .slide.show-image-desc .image-desc-mobile{opacity:1;-webkit-transform:translatey(0%);transform:translatey(0%)}.grid{opacity:1}.grid:after{display:none}.grid .thumb{width:100%;margin-left:0;opacity:1}} I would like to make the caption on the site optional with button next to the navigation of show thumbnails that just says caption that will open the caption. Here is a screenshot.
  13. Site URL: https://addisonpann.art password: toast Using code provided by these forums, I have been able to initiate a caption overlay on masonry grid images upon hover. It works like a charm on my Graphic Design page, but the Hand Drawn page's captions appear dimmed, and I'm thinking they may be below the partially-transparent overlay. Here's the CSS I'm using: /* ------- GALLERY CAPTIONS --------*/ .gallery-caption-grid-masonry p.gallery-caption-content { font-family: "Helvetica Neue", sans-serif; font-size: 2vw !important; font-weight: 500 !important; text-transform: uppercase; line-height: 1.2em; color: #E19D9D; margin: 1.5em !important; } /*---- CAPTION HOVER OVERLAYS ------*/ .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; max-width: 100vw; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before { background-color: rgba(0,0,0,.5); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 999999; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before { opacity: 1; transition: all .5s } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 2em; font-weight: 400; margin: 2vh 2vw; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; } I'll admit I haven't used z-index much in the past, and I'd imagine the issue stems from that. Why do the captions display correctly on the Graphic Design page, but not on Hand Drawn? Thanks in advance!
  14. Hello - I'm trying to eliminate the drop shadow on the image caption, and keep the drop shadow on the image itself. Site Example: https://clavichord-swordfish-x886.squarespace.com/config/ Enter: jellybeans I'd appreciate any suggestions!
  15. Site URL: https://www.lisawolffmcintyre.com/ Hello! I am using version 7.1 (Beaumont). I am trying to remove the underline from the link text in the caption on an image block. It is an inline image with the caption below. I tried all the code I found in previous posts on this topic in this forum, but didn't get results. Sure would appreciate an assist!
  16. Site URL: https://www.david-wright.com/ Site password: davidwright Hello, I'm using Avenue template. My video captions consist of two lines (the title of the video on the first line and then on the second line below a quick description about the work). I'd like the two lines to be different fonts and colors. The current font and styling is correct for the first line but I'd like to make the second line 10px proxima nova in the color black - how would I do this? ------- As a separate issue, the spacing of the caption on my first video differs to the captions of my other videos, it's positioned higher up and closer to the video. How do I get the other captions to do the same as the first? I've done the same spacing and formatting for all of them when typing in the captions. Any help is greatly appreciated ๐Ÿ™‚ Thanks, David
  17. Site URL: https://www.offpaper.design/portfolio-redo Hello! I'm re-doing a portfolio and need to make the Masonry Gallery grid with opacity overlays with clickable captions. (have made the page temporarily live incase anyone needs to look at the coding) I've found lots of threads on here that has gotten me to a certain stage, but as soon as I add in a link, the overlay disppears? If anyone can help, that would be great, thank you!
  18. Is it possible to change the alignment of the paragraph text separately from the Heading text of an image caption?
  19. Hello, I'm on Bedford. I want to customize the font style and size of the gallery block image captions. How do I do it? I can't find a universal type option.
  20. Posting again because my original post is missing. I'm doing my first 7.1 site for an artist client who has a large portfolio of work. Since captions are not yet supported in the gallery or portfolio layouts, has anyone figured out a workaround? Or any way to mimic thumbnail image navigation? It's a requirement to caption the artist's images with the gallery, otherwise I may as well go back to a Brine layout. Thanks.
  21. Site URL: https://dandelion-buffalo-bkmz.squarespace.com/config/pages/618978872006b30319c36796 I'm trying to adjust the font size of the captions of images within projects of a gallery. The only place to insert text is in the "image description" section under uploading images. Once the text is uploaded it remains as default to the paragraph style, but doesn't have any place to adjust size, nor to display the image description when the Lightbox feature is enabled. All I can do is enable/disable captions. Is there a way to change the font size? Can the captions display when using the lightbox?
  22. I would like to make the caption on a gallery grid 2 lines and have the first line be bold. Can anyone suggest custom code to do this?
  23. Site URL: https://www.sarahbergeronartist.com/paintings I am using the masonry gallery on a number of pages on my website https://www.sarahbergeronartist.com/paintings. I would like to find a way to have all image captions show up ONLY in lightbox - centered under the image - and not show the captions in the gallery view. I'm using version 7.1 and I have the most basic squarespace plan, if that is relevant. Can someone help me do this?
  24. Site URL: https://steven.squarespace.com/giulia If you scroll down a little, there's a gallery block. The first image has a caption. However, on mobile, it's not automatically visible until you tap on the "lightbox meta trigger" (small gray dot in the lower right corner). I would like the captions to be visible without having to tap on the trigger first. Is it possible with CSS or JS? Thanks.
  • Create New...