dotandpeg Posted February 21 Share Posted February 21 Hi, I have a carousel gallery block that has titles and descriptions overlayed on desktop (see screengrab). They vanish on mobile (see screengrab). I need help with: - Make the title & description always visible on the image or below the image for mobile - Remove the row of thumbnails on mobile https://vanilla-sawfish-kk9x.squarespace.com/meditations-1 Thanks as always, Laura Link to comment
tuanphan Posted February 24 Share Posted February 24 Remove thumbnails will create a white gap Use this CSS code @media screen and (max-width:767px) { div.sqs-gallery-thumbnails { display: none !important; } .sqs-gallery-block-slideshow .slide.loaded .meta { z-index: 10000 !important; bottom: -160px!important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; background: transparent !important; opacity: 1 !important; left: 0 !important; text-align: center !important; display: block !important; } .meta * { color: black !important; } .sqs-gallery-design-stacked-slide { overflow: visible !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KatieVetter Posted February 27 Share Posted February 27 I'm having the same issue with image descriptions on mobile! I've double-checked all the settings, and I've even used a few small codes in the CSS to try and force the descriptions to be viewed, but nothing is working. If I find something that does work I will reply it here. This is a pretty significant bug that Squarespace needs to adderss. Link to comment
KatieVetter Posted February 27 Share Posted February 27 I found something that worked for me! I found the below code on another forum and gave it a try and it worked to force the image description and title to appear on mobile viewing. If your gallery is a carousel rather than a slideshow, you will likely need to replace "slideshow" with "carousel" in the code snippet. Here's the link to the forum I got the code from: /* Mobile gallery title */ @media screen and (max-width:640px) { .sqs-gallery-block-slideshow .meta { display: block !important; opacity: 1 !important; bottom: -15px !important; height: auto !important; max-width: 100% !important; left: 0 !important; margin-left: 0 !important; } } tuanphan 1 Link to comment
dotandpeg Posted March 1 Author Share Posted March 1 Thanks for responses but I have actually changed my mind and think for what I need a grid is better. Link to comment
KatieVetter Posted March 1 Share Posted March 1 I haven't attempted this since I don't have a grid gallery, but you can try the code below if you're still needing a solution. /* Mobile gallery title */ @media screen and (max-width:640px) { .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-title, .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-meta { display: block !important; opacity: 1 !important; height: auto !important; max-width: 100% !important; margin-left: 0 !important; position: relative !important; } .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-title { bottom: 0 !important; } .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-meta { bottom: -15px !important; } } tuanphan 1 Link to comment
dotandpeg Posted March 5 Author Share Posted March 5 @KatieVetter Thanks for your response but I have decided to use a gallery section with the items all on individual cards and that seems to work well as is good for being responsive on mobile. KatieVetter 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment