WA-Admin

@tuanphan Thanks for the solution! That worked! Is there a way though to make the captions appear below the image in black? The way it is now, the captions are white and on top of the image, making it a little hard to read. Thank you!

Hi! Just noticed that the mobile version of the site I'm working on doesn't display the captions that appear with the images in the gallery pages. For instance, https://www.lindasaccoccio.com/2020-2021 shows the captions with every image on PC, however, when you view it on a phone, the captions go away. I'd like to have the captions showing all the time across all platforms. Is there some way I can alter the code to make them appear on mobile like they do on the PC? Or is there a simpler, code-less solution? Thanks in advance.

Thanks tuan! That worked! 🙂

Perhaps this question has been answered before, but I haven't seen the answer for it yet: Whenever I add a slideshow to a page, the name of the file shows up at the bottom of each image (for instance, "ls 2.jpg") and doesn't look good. How do I get rid of the file name automatically showing up as the description for each image? Here's my link: https://www.lindasaccoccio.com/poem-paintings I talked to a Squarespace customer service guy and he said it was a problem with my CSS. I have a very limited knowledge of coding, and haven't touched this site's coding before. Here's my code: .header-nav-folder-content .header-nav-folder-item a { padding: 0.5em; color: rgb(153, 0, 0); text-align: left; white-space: pre-wrap; } .header-nav-folder-content .header-nav-folder-item a:hover { color: #990000; } .header-nav .header-nav-item--folder .header-nav-folder-content { box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.2); border-top: 2px solid #990000; width: 200px; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Georgia", sans-serif; font-size: .9rem; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: -35px; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; text-transform: uppercase; text-align: center; letter-spacing: 1px; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } .sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta { bottom: -70px; text-align: center; background: none; color: #000; } .sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside { padding: 0; } .sqs-gallery-block-slideshow .meta .meta-title { color: #414042; font-size: 13px; font-weight:bold; letter-spacing: 0px; } .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p { color: #414042; font-size: 13px; } .sqs-gallery-controls .previous, .sqs-gallery-controls .next { background: none; color: #414042 !important; } .sqs-gallery-controls .previous { left: 0px; position: fixed; top: 300px; } .sqs-gallery-controls .next { right: 0px; position: fixed; top: 300px; } .sqs-gallery-controls .previous:hover, .sqs-gallery-controls .next:hover { background: none; } @media only screen and (max-width: 480px) { .sqs-gallery-block-slideshow .meta { display: block !important; } } @media screen and (max-width: 575px) { .gallery-lightbox-controls { display: flex !important; } .gallery-lightbox-control-btn { background: rgba(0,0,0,.5); width: 30px; height: 44px; } } Can anyone tell me what I would need to get rid of? Thanks in advance.