Gallery Lightbox CSS Help

CMDRShepard

Hey there, DGRIN folks!

I'm hoping one of you geniuses can help me with some custom lightbox CSS.

Few things:

1. I'd like the buy button and tool icons that are under the photos on the right to be right-justified but never go any further to the right than the right edge of the photo above it (if that makes sense). Sometimes on super-wide screens, the buy button ends up being WAY over to the right and it's not even under the photo anymore. I'd like the right edge of the buy button to always mimic the right edge of the photo above it regardless of the size of the window/screen.

2. In adding some custom CSS I've found online, to ALWAYS show the description and titles in the lightbox (instead of having to hover over the arrow to get it to pop up), I seem to now have lost my description section somewhat. One line of text will show but anything more than one line ends up getting cut off below what is visible. Any thoughts on fixing that? I'd like to do it in a fashion that doesn't add a scroll bar. If there's a few more lines of text, I'd rather have the lightbox image shrink a bit to accommodate than for the page to add a scroll bar for the text.

3. Similar to my first question, I want the description/title text to be left-justified but never be further left than the left side of the image above it, regardless of if you resize the window or things like that.

4. I'd like to add a 1pix image border to the lightbox images ONLY, if possible.

I'd post the links to my site and a screenshot example but it seems as though the forums won't allow me to post any links yet because I'm too new.

I can send them via some other method to anyone willing to help.

Thanks much!

Hikin' Mike

You can post your site here like 'yoursite.com`.

CMDRShepard

www.earthriseexposures.smugmug.com

Hikin' Mike

My monitor isn't very large, so if you can provide a screen print, that would be helpful (I think).

Can you provide a link to one of the photos that displays the description/title as well. I looked at a few of your pictures and I'm not seeing them.

You should be able to post the image URL. If not, you can PM me if you'd like.

CMDRShepard

imgur.com/a/s2puh

There is a screenshot of one of the lightbox photos. Most of my photos won't have a title but will have a description.
Here's the link to the page for that image:

earthriseexposures.smugmug.com/Gallery/NATURE/i-TMhC6FH/A

Thanks so much for any help/insight! :)

Hikin' Mike

The custom CSS you have is making the buttons going past the image as well as the title/description. There is now way that I know of to have the extra lines without the scroll bar.

Hikin' Mike

This will add a 1px border around the lightbox image provided you remove the custom code.

.sm-user-ui .sm-lightbox .sm-lightbox-image {
    border: 1px solid #ccc;
    }

leftquark

Much of what you ask for can be done within the Customizer without needing any CSS (limiting the buttons to the width of the photo, for example)!

Start by navigating to a Gallery, then enter Customize -> Content and Design. On the right-side panel, under "Content" tab, choose "Lightbox" and you'll see lots of options there.

Allen

Be careful, for narrow portraits the caption/title overlaps the tools in lightbox.
Just tried it and noticed.