Drop shadows are cut off by page margins

bokehlover71

I've managed to make a nice, small drop shadow on the thumbnails to make the pictures look more "3D". The only problem is that the drop shadows are cut off on each side of the page, and also on the top of each row of thumbnails. Here is the code I use:

.sm-gallery .sm-tile-content {
box-shadow: 1px 1px 5px #888888;
}

Is there a way to avoid this?

Hikin' Mike

Without a link to your site, I can only guess, so you can look at this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Styling-the-SmugMug-Gallery

bokehlover71

Thanks! I don't think the SmugMug gallery style has this problem, because the thumbnails never go fully out to the edges of the page content. My site is password protected and that's why I don't have any link. But here is a screenshot. I have made the shadows a bit larger and darker to emphasize the problem:

Hikin' Mike

You can try adding max-width: 98% to this:

.sm-gallery .sm-tile-content {
  box-shadow: 1px 1px 5px #888888;
  max-width: 98%;
}

Adjust the width to suit. If this doesn't work, I'll need to see your site/page, even a test page.

bokehlover71

Thanks! 97% was enough to fix the vertical cut off. But it also cuts off the right side of all images, this is especially visible where I have kept the white frame around the scanned images. And the horizontal top shadow is still missing (tried to add "max-height: 97%", but nothing happened).

I think the solution must be something like adding a padding inside the page content block. I have tried, but this still cuts off the shadows instead of making more space for them.

Hikin' Mike

Can't help anymore w/o seeing it.

bokehlover71

I just sent you a PM.

Hikin' Mike

Try this:

.sm-gallery .sm-tile-content {
  box-shadow: 1px 1px 15px #888;
  margin: 15px; /* for the blur */
}

.sm-tiles-row-organic .sm-image{ width:100%; }