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
  • 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. 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):
  2. Using brine template using a gallery block inside a page using grid design style. if you choose the lightbox option - it doesnt give option NOT to display a caption in the lightbox. i need captions to show under each image in the grid so i cant delete it to solve the lightbox caption problem. so i would like to either: a - not display the caption - or - b - be able to style the caption to match the site better. ive tried all kinds of code i found in this forum and it isnt working. hoping this can be done with custom css code? this is a 7.0 site. any help is appreciated! thanks!
  3. Site URL: https://koi-brass-wxnc.squarespace.com/home hi I am wondering if you can turn off the caption on a single image within a gallery, keeping the style on the remaining images. Specifically on my site's Choreography page, the image that says "choreographic selections" - I want to just have it sit there as a title slate. Or i could make a new image with the title on it but i would still need to turn off the caption hover on that image. is it possible? thanks for any suggestions you might have kathleen ps password is Callahan100%
  4. Site URL: https://fbcamherst.squarespace.com/staff Password on site is: fbcfbc I am trying to add a read more, expandable text field to our images using this method. I'm currently using a gallery, which does not allow HTML within the caption. As you can see, we have a lot of text. Is there a way to enable HTML inside these containers? Is there another way to create an expandable field of text within image captions? Thank you!
  5. Hey all, does anyone know how to add a caption to an image so that it appears when you click on the image in lightbox. Basically, I want thumbnails but when you click on one it opens the lightbox (larger view) and has a caption to the side of the image. Thanks
  6. 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.
  7. Site URL: http://wrasse-purple-8tlh.squarespace.com Hi, I am trying to get the hover color on my captions to be the full height of the image. I tried editing the height to 100%, but I can't get it to work!
  8. Site URL: https://www.outstampingcreations.ca site: www.outstampingcreations.ca pw: ineedhelp I am using a masonry gallery to display all the stamp design options I have(on website: available options --> design stamps), however the gallery leaves much to be desired when it comes to trying to sort the images in a particular order. They seem to go willy nilly and randomly switch images on me or move them to the bottom after I try to set an image in a specific order. Seeing as I will constantly be adding images of new designs available, I will constantly have to re-sort them. The only option to do this without driving me crazy is delete all images in the gallery and re-add them as they will automatically be organized by file name and thus alphabetically at that time. BUT this also means I at times will have to re-caption 40+ images. Is there: a) a way to make image captions automatically appear using the file name without having to manually add each one? b) sort the images alphabetically so I don't have to delete and re-add them all each time I add new stamps? I have one more unrelated question... it appears some text boxes have 17px padding all sides except the top. I figured it had to do with my custom CSS code but can't figure out which is causing the issue so maybe not? Here's all the custom CSS I am currently using for design: //MAKE 3 COLUMNS ON MOBILE CONVERTING MASONRY TO GRID// @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(4, 25%)!important; grid-column-gap: 10px; grid-row-gap: 10px; padding: 10px; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: 100% !important; } } //MAKING 10 COLUMNS ON PC BY TURNING MANSONRY TO GRID @media screen and (min-width:768px) and (max-width:4000px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(10, 9.5%)!important; grid-column-gap: 10px; grid-row-gap: 10px; padding: 10px; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: 100% !important; } } .sqs-block-button a { color:#fff !important; background-color: #000 } .sqs-block-button a:hover { color:#fff !important; } .image-caption p{ color:black; font-family: Utile Narrow !imporant; font-size: .6em !important; margin-top: 0px; margin-bottom: 0px; } //center image block caption// .sqs-block.image-block .image-caption-wrapper p { text-align: center !important; } //decrease padding above caption on block images// figcaption.image-caption-wrapper { padding-top: 10px; } .gallery-caption p { text-align: center !important; margin-bottom: 0px !important; } //decrease height between caption and image// figcaption.gallery-caption.gallery-caption-grid-masonry { padding-top: 2px !important; } // Move Over Button on hover // .sqs-block-button .sqs-block-button-element--small { -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } .sqs-block-button .sqs-block-button-element--small:hover { margin-left: 50px; -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } /* Image Captions on Hover for Panograms*/ .page-section[data-section-id="61475378934103148a4e5601"]{ .image-caption-wrapper { min-height: 100%; display: flex; align-items: center; /*vertically centered */ justify-content: center; /*text align center*/ background: rgba(255, 255, 255, 0.8) !important; /* Background Overlay*/ } } #block-yui_3_17_2_1_1632078087225_12531 { background-color: hsl(209, 0%, 13%); h3{ color:hsl(37, 0%, 95%)!important; }} #block-yui_3_17_2_1_1631223080617_27126 { background-color: hsl(209, 0%, 13%); h3{ color:hsl(37, 0%, 95%)!important; }} #block-yui_3_17_2_1_16312 { background-color: hsl(209, 0%, 13%); h3{ color:hsl(37, 0%, 95%)!important; }} #block-yui_3_17_2_1_1631223080617_70724 { background-color: hsl(209, 0%, 13%); h3{ color:hsl(37, 0%, 95%)!important; }} .header-nav-item a:hover { color: hsl(227, 83%, 43%)!important; text-decoration: underline; } I love how much info is on this forum - I've already been able to solve many problems myself by reading other threads so thank you for all those answers and thank you in advance for my questions 🙂
  9. Site URL: https://www.smorgasburg.com/ Hi, Im currently using Brine 7.0 and Im trying to edit the vendor page on my site. The gallery captions are not working with the CSS customization codes I have found. I am trying to have the vendor name in bold and the location underneath on a separate line. Is that possible?
  10. Site URL: https://www.51eggs.com Hello, I have a series of images with Caption Overlay on Hover on my home page, which I've managed to change the size of the overlay (previously covered 1/4 the lower portion of the image on hover) to cover the full width of the image, using the .image-caption selector. I would like to lighten up the built-in overlay a bit, but am having trouble targeting it. Adjusting the opacity of .image-caption works, but it makes the captions within the overlay semi-transparent as well. Any suggestions? Thank you!
  11. Site URL: https://www.ridgemount.uk/contact Is there a way to make the text in the captions of these two images larger, without it affecting the captions on other parts of the website? The page is https://www.ridgemount.uk/contact Thanks
  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: http://www.brentstirton.com/ Hi, I would like to add a caption button to my wells captions, would anyone know how to do it like these screenshots?
  14. Site URL: https://harp-chihuahua-m5cc.squarespace.com/ The caption display for the slideshow reel runs off the left side of the screen and behind the arrows, making it impossible to read on mobile. Desktop is fine. I'd like the caption (multiple lines) to be centered under the image and between the arrows on mobile for full readability. Hoping there is a way to solve this with some css.
  15. Site URL: https://tomato-hibiscus-5kcf.squarespace.com/fleet-finch Hello! I have used some code to create a caption on hover in a simple grid gallery. It works fine, but the I would like to increase the padding around the text. https://tomato-hibiscus-5kcf.squarespace.com/fleet-finch password: Magnolia. Here is the code I used: /* Image Captions on Hover*/ .layout-caption-overlay-hover .image-caption-wrapper { min-height: 100%; display: flex; align-items: center; /*vertically centered */ justify-content: center; /*text align center*/ background: rgba(255, 108, 0, .8) !important; /* Background Overlay*/ } .layout-caption-overlay-hover .image-caption-wrapper p1 { color: White !important; /* font color of caption */ }
  16. 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!
  17. Site URL: http://www.brentstirton.com/ Hi, I am working with a trial page of the wells template and am having issues with large captions. I saw Brent Stirton's page and saw his caption button layout, so i'm asking if anyone knows how to code for this. Thanks.
  18. Hello, I'd like to add a caption/text on an image "card" block on hover like it is possible within the "inline" design of image blocks. Thanks for your help. Palladio
  19. Site URL: https://www.cameragear.ca/ Hey there, I am working on a camera gear rental website and I have run into some issues when it comes to formatting. I want to have all of my equipment listed on a catalogue which I have a part of it currently setup. Since I am using a image gallery to display the gear it only allows me to use a simple caption to write down the equipment name. I want to be able to caption the gears daily rental price somewhere on or around this image in a pleasing way. I don't want to use the standard caption font, or size. I would prefer to have the price listed somewhere on the image in a bolder font, but even if it was next to the current caption I would want it to be a different font, color and size. Any help would be greatly appreciated.
  20. Site URL: http://hilarybeckwith.com/main-page Hello - Is there a way to add an image caption in the Stacked layout via code? I am trying to customize caption text to be as a centered overlay over an image, and I think I found coding for that. But I need to know how to add the actual text. Can I add HTML code to the Custom CSS window? I'm afraid to mess it up! I've attached a screenshot for reference - I would like to add the one-word text that is currently immediately below each image, to the center of the image instead, and change the stylings (which I think I can figure out).
  21. Site URL: https://dalmatian-piccolo-3aby.squarespace.com/clients Hi there, I am trying to create a series of images with captions that overlay the photos. I've done this using the poster feature on image blocks. What am trying to do is style these captions so that they appear on a semi transparent block. All of these photos will be square so I am trying to create caption-background blocks that are square at like 30 or 50% opacity, in order to honor the image behind it. Site: (scroll to "PRESS") Password: Steak1 https://dalmatian-piccolo-3aby.squarespace.com/clients As you can see in the image I added I've put black background color on the text which does not achieve the aesthetic I am aiming for... Input is appreciated!!
  22. Hello I've found that when displaying captions underneath a gallery block with slideshow: reel (in Squarespace 7.1), it creates a huge empty gap underneath, before the next section begins. If you remove captions the next section starts immediately under the gallery block. I'm looking to find a way through custom css (I assume is the only way here), to have this dead-space reduced as much as possible, I've attached an example of the issue both in desktop and mobile view (which highlights the issue even more). If anyone can help out, please let me know! Thank you!
  23. Site URL: http://www.fish-cylinder-plyr.squarespace.com Hello there, I've been trying to change the font family of captions with the following code: .gallery-caption-content p { font-family: Calluna Sans !important; } But, it's not working at all! Can anybody look into this, pretty please? Many, many thanks! Sara
  24. Hi! I am using a Masonry Grid gallery, the caption feature is turned on, however when I'm on lightbox mode, the description doesn't appear. I would like the caption to only appear on lightbox, not in the grid. Is this possible?
  25. Site URL: https://tomato-hibiscus-5kcf.squarespace.com/ Hello! We are uploading hundreds of stories that each have hundreds of photos to our site and each time we add a caption it needs to be changed from "paragraph 2" to "paragraph 3". While this only takes a few seconds for each photo, it would save a lot of time overall if it could simply default to paragraph 3... Is there a way to do this site-wide? Thank you in advance! https://tomato-hibiscus-5kcf.squarespace.com/ Password: Magnolia
  • Create New...