Box shadow help for main image on homepage

ali22 · December 11, 2013

Hi - I am using CSS to apply a box shadow to the thumbnails on my site, and I tried using it for the main image on my homepage. However, I'm only getting the shadow on the right side of the image - nothing at the bottom. I've tried increasing the bottom margin on content block, and it doesn't change anything.

Any suggestions? I'm completely new to using CSS and customizing my site, so advice is much appreciated!

Here's the CSS code I'm using:

/* Add 20 pixel border and drop shadow around the main photo */
.sm-user-ui .sm-image {
border: 20px solid #FFFFFF;
padding: 0px;
box-shadow: 20px 20px 19px #404040;

}

And my site is www.ali22.smugmug.com.

-Ali

Hikin' Mike · December 11, 2013

Try adding this to your existing CSS:

margin-bottom: 35px;

Smug Eric · December 11, 2013

The reason it is doing that is because the box for that image cuts off right where the photo ends. So the drop shadow is there, it's just being cut off because the box holding it stops where the photo does. Adding this to a CSS content block looks to fix it though:

.sm-tile-photo .sm-tile-content {
padding-bottom: 40px;
}

ali22 · December 12, 2013

Wonderful. Thanks Eric, that worked perfectly! Appreciate the help.

Ali

Box shadow help for main image on homepage

Comments