WA-Admin
Member-
Posts
4 -
Joined
-
Last visited
WA-Admin's Achievements
Level 2 (2/20)
0
Reputation
-
How to make captions appear on mobile version?
WA-Admin replied to WA-Admin's topic in Customize with code
@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.
-
WA-Admin reacted to a post in a topic: Gallery Caption workarounds for 7.1?
-
Thanks tuan! That worked! 🙂
- 336 replies
-
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.
- 336 replies