Kristata Posted October 23, 2019 Share Posted October 23, 2019 (edited) does anyone know the coding of how i can have the title and description of my slideshow gallery block display on mobile? thanks. Edited October 23, 2019 by Kristata Link to comment
JoeGrima Posted October 23, 2019 Share Posted October 23, 2019 I have the same issue with a website for a friend of mine who is an artist. The details of his paintings do not show on mobile, when tapping in an image to open in lightbox. Link to comment
tuanphan Posted October 23, 2019 Share Posted October 23, 2019 @JoeGrima If you share site url, i can take a look 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
JoeGrima Posted October 24, 2019 Share Posted October 24, 2019 8 hours ago, tuanphan said: @JoeGrima If you share site url, i can take a look Of course, this is the site: https://www.nathanaeltheuma.com/gallery#/figurative/ Once you open the picture, the details come up, but the same does not happen on mobile. Link to comment
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @JoeGrima Try adding to Home > Design > Custom CSS @media screen and (max-width:640px) { .sqs-lightbox-meta { opacity: 1 !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
JoeGrima Posted October 24, 2019 Share Posted October 24, 2019 No luck on iPhone I’m afraid. I have attached a screenshot Link to comment
FrancesMc Posted October 24, 2019 Share Posted October 24, 2019 Same problem here https://www.jillkoy.com/find-a-candidate - descriptions don't show, Brine template. Link to comment
FrancesMc Posted October 24, 2019 Share Posted October 24, 2019 4 hours ago, tuanphan said: @JoeGrima Try adding to Home > Design > Custom CSS @media screen and (max-width:640px) { .sqs-lightbox-meta { opacity: 1 !important; } } Tried this but doesn't seem to have any effect Link to comment
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @JoeGrima REmove above, and try this @media screen and (max-width: 640px) { .sqs-lightbox-meta { opacity: 1 !important; bottom: 30% !important; left: 10% !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
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @FrancesMc Add to Home > Design > Custom CSS @media screen and (max-width:480px) { .sqs-gallery-block-slideshow .meta { display: block !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
FrancesMc Posted October 24, 2019 Share Posted October 24, 2019 6 minutes ago, tuanphan said: @FrancesMc Add to Home > Design > Custom CSS @media screen and (max-width:480px) { .sqs-gallery-block-slideshow .meta { display: block !important; } } Thanks for this. It works but text is too large so cropped. Link to comment
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @FrancesMc Please "Like" if the answer is correct Remove above and add this @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 12px !important; } } rikkiprice, bekaRoo, FrancesMc and 1 other 3 1 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
FrancesMc Posted October 24, 2019 Share Posted October 24, 2019 11 minutes ago, tuanphan said: @FrancesMc Please "Like" if the answer is correct Remove above and add this @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 12px !important; } } Well you're just awesome - this works perfectly - thank you! Link to comment
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @FrancesMc "Like" (heart icon, bottom right) if the answer is correct. Thanks. FrancesMc 1 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
JoeGrima Posted October 26, 2019 Share Posted October 26, 2019 I’m afraid it still does not work for me. I am noticing that when I open a picture in a gallery, there is actually a small dot in the bottom right corner. Once that dot is tapped, the caption appears. It is however very difficult to tap it because on iPhone, the gesture is interpreted as an attempt to close or move the app. Screenshot attached. Link to comment
TEPhoto Posted December 12, 2019 Share Posted December 12, 2019 On 10/24/2019 at 8:11 AM, tuanphan said: @FrancesMc Please "Like" if the answer is correct Remove above and add this @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 12px !important; } } This worked like magic! I've been trying to figure it out forever! Thank you so much! SChan 1 Link to comment
Vigli Posted April 7, 2020 Share Posted April 7, 2020 The solution I found to work is... .index-gallery .description { display: block !important } Link to comment
jinlikegold Posted January 20, 2023 Share Posted January 20, 2023 On 10/24/2019 at 5:11 AM, tuanphan said: @FrancesMc Please "Like" if the answer is correct Remove above and add this @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 12px !important; } } Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help! My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight) Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace. If you find my suggestions helpful, please upvote & like!😺 Link to comment
tuanphan Posted January 26, 2023 Share Posted January 26, 2023 On 1/21/2023 at 6:09 AM, jinlikegold said: Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help! My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight) I don't see Member Spotlight. Can you take a screenshot? 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
jinlikegold Posted February 10, 2023 Share Posted February 10, 2023 On 1/26/2023 at 4:55 AM, tuanphan said: I don't see Member Spotlight. Can you take a screenshot? Hi there, sorry about the delay. Here is a screenshot. Somehow the caption issue seems better on desktop, but it is still happening on mobile (switching back and forth between centered and off to the right. The image is also off center on most smaller screen sizes. And the URL again: https://www.youbelongsd.com/membership-page Thank you! Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace. If you find my suggestions helpful, please upvote & like!😺 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