Jump to content

Title and description not showing on gallery lightbox

Recommended Posts

Site URL: http://piaeklund.com

Hi, on my desktop i can see titles and descriptions hovering over my lightbox images. But it does not appear on mobile. Only pressing the little dot in the down right corner makes it show, wich is not much help since no one knows to press that. It would be helpful if the box constantly shows in lightbox on mobile.

It looks like there is some code that you can do to make this work? I use template "native". 

If there is a code, how do i apply it and where? (I´m not a coder so have no clue about these things.)

www.piaeklund.com

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, studiopiaeklund said:

Site URL: http://piaeklund.com

Hi, on my desktop i can see titles and descriptions hovering over my lightbox images. But it does not appear on mobile. Only pressing the little dot in the down right corner makes it show, wich is not much help since no one knows to press that. It would be helpful if the box constantly shows in lightbox on mobile.

It looks like there is some code that you can do to make this work? I use template "native". 

If there is a code, how do i apply it and where? (I´m not a coder so have no clue about these things.)

www.piaeklund.com

You can try

@media only screen and (max-width: 767px) {
  .sqs-lightbox-meta.overlay-description-visible {
    bottom: 0 !important;
  }
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi, thank you, it worked. BUT, it only works when i have the site set on on mobile styles. I have "disabled mobile styles" on template settings, to get the same look on my site either you are on desktop or mobile. And in this look this doesn´t work. Obviously because you can´t hover over on mobile, wich makes sense.

So, my next question is, is it possible to take away the hover effect in lightbox, and have descriptionbox constantly showing when in lightboxmode? Maybe that way the description would show on mobile, even when having disabled mobilestyles.

Link to comment
On 4/22/2022 at 3:49 PM, studiopiaeklund said:

Hi, thank you, it worked. BUT, it only works when i have the site set on on mobile styles. I have "disabled mobile styles" on template settings, to get the same look on my site either you are on desktop or mobile. And in this look this doesn´t work. Obviously because you can´t hover over on mobile, wich makes sense.

So, my next question is, is it possible to take away the hover effect in lightbox, and have descriptionbox constantly showing when in lightboxmode? Maybe that way the description would show on mobile, even when having disabled mobilestyles.

Add to Design > Custom CSS

/* Disable description on lightbox */
.yui3-lightbox2 .sqs-lightbox-meta {
    display: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Thank you, but i think you misunderstood. Now the description doesn´t show at all.

The problem is that i -need- the description to show in lightbox. Both on mobile and desktop.

I have my site set as "disable mobile styles", so that it looks the same on desktop and mobile. On mobile the hover effect doesn´t work for obvious reasons. So my question is, is there some way, to make description show all the time. Maybe by disabling the hover effect, and make the description show -all the time-.

Thank you.

Link to comment
On 4/29/2022 at 3:38 AM, studiopiaeklund said:

Thank you, but i think you misunderstood. Now the description doesn´t show at all.

The problem is that i -need- the description to show in lightbox. Both on mobile and desktop.

I have my site set as "disable mobile styles", so that it looks the same on desktop and mobile. On mobile the hover effect doesn´t work for obvious reasons. So my question is, is there some way, to make description show all the time. Maybe by disabling the hover effect, and make the description show -all the time-.

Thank you.

Try this new code

.yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {
    bottom: 100px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.