Bug or something about my customization for "Download" next to download button or something conflict

mrhoni

I haven't had to create this kind of gallery web page for a while so I don't recall if this issue has been there in the past or something new.
If a photo is clicked it goes to the lightbox. In the bottom left of the photo should see "Download", but its truncated.

Here's a link to the web page I'm working on
https://www.mrhoni-photography.com/Portfolio/Special-Events/Hair-of-the-Dog-2019/

This is some CSS on this page that I've used in the past to get the word Download next to the icon.

denisegoldberg

I just checked my site and my code is a little different:

.sm-button.sm-button-image-download:after {
margin-left: 4px;
display:inline-block;
content: "Download"
}

The word isn't truncated. You can see it on this page - https://www.denisegoldberg.com/On-paws-and-wings/Baxter-Gracie/i-pR7mK5c/A.

I just looked at your page and the word isn't truncated there either - but it does appear to be sitting almost on top of the sizes icon.

mrhoni

Thanks. I see yours looks good. I used the code you have shown with no change. You're right, its not truncated, but its as if the space it wants to reside only has so much room. I assume that something I have set is conflicting. I'm stumped. I played with the Lightbox settings for this page and didn't resolve.

BTW: How do I place CSS code in the post so that it appears readable?

Lille Ulven

In the formatting line above the text box you are typing your post in, you see something looking like a vertically mirrored P followed by an I. Mark the text you want to show as code then click that symbol and chose Code (fourth option from the text). Et voila your code is presented in a readable form once you post your comment.

Good luck.

mrhoni

Trying your suggestion Lille

/* Add the word "Download" after the download button */
.sm-button.sm-button-image-download:after {
  margin-left: 4px;
  display:inline-block;
  content: " Download"
}

Lille Ulven

And now for a second suggestion
try adding this little bit of code to your theme's CSS to make the download-button area a little larger:

.sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome.sm-button-image-download.sm-button-square {
    width: 20%;
}

mrhoni

Thanks for the suggestion but that made things worse. The lightbox didn't really improve and the gallery got worse.

Here's what the gallery looks like with that change.

Here's what the gallery looks like after removing the change