2Hands Posted January 12, 2023 Share Posted January 12, 2023 Hey Squarespacers! Happy new year - hope everyone is well 🙏🏻 The page in question is: two-hander.com/work The template is Balboa, SS 7.1, the images in questions are in a Strips Gallery. The issue is that captions display terribly on mobile devices. I've added custom code to the page in order to achieve a hover-overlay effect for the caption/description for each image and it works beautifully on Desktops but on mobile devices the text is too faint, some times misplaced, sometimes not appearing, etc - it's too inconsistent. Is there any CSS that would enable the captions/descriptions to be static and automatically appearing for mobile devices only? Thanks everyone! Cheers! Link to comment
tuanphan Posted January 15, 2023 Share Posted January 15, 2023 Hi, Which code did you use? We can add media query code to make it run on desktop only 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
2Hands Posted January 15, 2023 Author Share Posted January 15, 2023 Hi Tuanphan, Thanks for your response! 🙏🏻 Here's the code I'm using: .gallery-caption-grid-strips { background-color: rgba(255, 255, 255, 0.7); box-sizing: border-box; padding: 20px 50px; max-width: 100%; pointer-events: none; position: absolute; bottom: 0; text-align: center; transform: translateY(100%); transition: transform .0s; } .gallery-section .gallery-caption.gallery-caption-grid-strips p { font-family: 'Poppins'; font-size: 12px; font-weight: normal; text-transform: none; } .gallery-strips-item { overflow: hidden; } .gallery-strips-item:hover .gallery-caption-grid-strips { transform: none; } .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background: rgba(0, 0, 0, 0.7) !important; } Link to comment
Solution tuanphan Posted January 18, 2023 Solution Share Posted January 18, 2023 You can change it to this @media screen and (min-width:992px) { .gallery-caption-grid-strips { background-color: rgba(255, 255, 255, 0.7); box-sizing: border-box; padding: 20px 50px; max-width: 100%; pointer-events: none; position: absolute; bottom: 0; text-align: center; transform: translateY(100%); transition: transform .0s; } .gallery-section .gallery-caption.gallery-caption-grid-strips p { font-family: 'Poppins'; font-size: 12px; font-weight: normal; text-transform: none; } .gallery-strips-item { overflow: hidden; } .gallery-strips-item:hover .gallery-caption-grid-strips { transform: none; }} .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background: rgba(0, 0, 0, 0.7) !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
2Hands Posted January 18, 2023 Author Share Posted January 18, 2023 Hi Tuanphan, You nailed it! It worked! Thanks so much for your help! I appreciate your time and talent! Sending best from NYC! 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