Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Recommended Posts

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!!!

Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

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";
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
  • 8 months later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

D1D0FCAD-418E-4F43-9468-DF730986724E.png

13D03AB2-BE25-45ED-A3A6-4225BFCD94C5.png

Link to comment
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!

D1D0FCAD-418E-4F43-9468-DF730986724E.png

13D03AB2-BE25-45ED-A3A6-4225BFCD94C5.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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?

audedelabouillerie.com-01-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...