LightBox Description in Mobile

Site URL: https://eveslaughterart.com/

Hi,

I hope someone can help me.  My website displays my artwork.  On my homepage, I use a gallery block to showcase each piece. Each image opens into a lightbox.  On desktop, all you have to do is hover and you can see the description.  Which is fine. However, when viewed on a mobile device, in order to see the lightbox description, the viewer has to click on a small unlabeled DOT in the lower right to view the image description.  You barely see the dot, and it isn't clear that a viewer needs to click on it.  Is there a way to have the image description BELOW the image without the hover/overlap? Or, instead of a "DOT", could this be replaced with "More Info"?

I've already reached out to Squarespace Helpdesk, and there isn't a solution.  I feel like this is an easy fix with the proper CSS.  Is there anyone that may have a solution?  

Thank you so much!!!

Hi. Sorry for the late reply.

Add this to Home > Design > Custom CSS

@media screen and (max-width:640px) {
a.sqs-lightbox-meta-trigger {
    visibility: hidden;
    width: 50% !important;
}
a.sqs-lightbox-meta-trigger:before {
    visibility: visible;
    content: "More Info";
}
}

OMG! That worked - thank you so much!!!!!

PS: So sorry for the late reply. I just saw this notification. 🙂

Hi, I used this code but it only is showing the dot, not More Info. This is a 7.0 template, is there any change for this?

Also, strangely I had code in there to circumvent this problem previously and then the code stopped working. Why would this happen?

Thanks

On 5/14/2021 at 8:42 AM, rebjones said:

Hi, I used this code but it only is showing the dot, not More Info. This is a 7.0 template, is there any change for this?

Also, strangely I had code in there to circumvent this problem previously and then the code stopped working. Why would this happen?

 

Thanks

Can you share link to your site? We can check easier

Hello Tuanphan, I used the code to replace the dot by « Détails » ; it worked fine but I was wondering how to keep the word in the far bottom right hand side area (exact same position as the dot)? 

Also, I would prefer the font to be the same size as the hover text. 

Thanks so much for your help!

On 5/21/2021 at 10:22 PM, Louleille said:

Hello Tuanphan, I used the code to replace the dot by « Détails » ; it worked fine but I was wondering how to keep the word in the far bottom right hand side area (exact same position as the dot)? 

Also, I would prefer the font to be the same size as the hover text. 

Thanks so much for your help!

Hi. Can you share link to your site? We can check easier

Sorry I only just saw your reply. Here's the link: https://www.audedelabouillerie.com/sculpture

Thanks!

I am having issues with a site that the images are not even opening in a lightbox would love to know what is happening or how to force the site to open the images in a lightbox on mobile.

On 5/28/2021 at 3:13 AM, Louleille said:

Sorry I only just saw your reply. Here's the link: https://www.audedelabouillerie.com/sculpture

Thanks!

Hi. Use new code

@media screen and (max-width:640px) {
a.sqs-lightbox-meta-trigger {
    visibility: hidden;
    width: 50% !important;
}
a.sqs-lightbox-meta-trigger:after {
    visibility: visible;
    content: "More Info";
    font-size: 30px;
    font-family: monospace;
    color: white;
}
}

5 hours ago, JustinSeimits said:

I am having issues with a site that the images are not even opening in a lightbox would love to know what is happening or how to force the site to open the images in a lightbox on mobile.

What is site url?

Thank you so much Tuanphan for your precious help! 🙏😄

On 6/4/2021 at 4:03 AM, Louleille said:

Thank you so much Tuanphan for your precious help! 🙏😄

Hi. Just a small problem. Do you want to fix this?

(Mobile-Footer) Make text not wrap & remove white a bottom of footer?

Sorry I only just saw your post. Thanks for your suggestions, how would I do that? 🙏

On 6/26/2021 at 4:56 PM, Louleille said:

Sorry I only just saw your post. Thanks for your suggestions, how would I do that? 🙏

Add to Design > Custom CSS

/* Footer mobile */
@media screen and (max-width:767px) {
div#block-4f0a0204ae11d26b3ee0 p {
    white-space: nowrap !important;
}
div#block-4f0a0204ae11d26b3ee0 {
    padding-left: 5px;
    padding-right: 5px;
}
body#collection-5dd706558fff286a0eb08570 {
    margin-bottom: 0 !important;
}
}