Smugmug Gallery Style: Caption Margin, Border and Padding

James_F

New Smugmug gallery style - I am attempting to learn how I can further reduce the amount of blank space between the image and the image captions. While I've already made some CSS tweaks suggested by several of you, there's still too much blank space - see http://jamesfarrell.smugmug.com . Moreover, the space varies depending upon the size (and the aspect ratio) of the browser window containing the smugmug gallery. I might not be able to do anything about that.

I've noted that some of you have made a CSS "minus margin" entries to reduce some space, and I've done that too. That said, I'm wondering if any of you have also made adjustments to the border and padding around the image content object and the caption? Notice any improvement? I am motivated to ask about this after looking at this - http://www.w3schools.com/css/css_boxmodel.asp - so, I'm wondering if it's possible to continue to trim the empty, wasted space between the image and the caption if the border and padding is also adjusted.

Full disclosure, I have no CSS coding skills; I copy, plagiarize and otherwise use what some of you have done.

rustyblades

James_F wrote: »

New Smugmug gallery style - I am attempting to learn how I can further reduce the amount of blank space between the image and the image captions. While I've already made some CSS tweaks suggested by several of you, there's still too much blank space - see http://jamesfarrell.smugmug.com . Moreover, the space varies depending upon the size (and the aspect ratio) of the browser window containing the smugmug gallery. I might not be able to do anything about that.

I've noted that some of you have made a CSS "minus margin" entries to reduce some space, and I've done that too. That said, I'm wondering if any of you have also made adjustments to the border and padding around the image content object and the caption? Notice any improvement? I am motivated to ask about this after looking at this - http://www.w3schools.com/css/css_boxmodel.asp - so, I'm wondering if it's possible to continue to trim the empty, wasted space between the image and the caption if the border and padding is also adjusted.

Full disclosure, I have no CSS coding skills; I copy, plagiarize and otherwise use what some of you have done.

Hi Jim

There seems to be no padding left in the caption and the extra space originates with the image.

It may be that your images are not large enough and are not completely filling the image box. I tried a vertical image http://jamesfarrell.smugmug.com/Site-Pages/West-and-Southwest/Utah-Route-12/i-DMhjNkk and the bottom of the image almost touches the bottom of the image container (the top is flush with the top of the container). The space between the caption and the image in this case doesn't seem excessive and seems about right. I noted that the image is only 1024 high.

This landscape image http://jamesfarrell.smugmug.com/Site-Pages/West-and-Southwest/Utah-Route-12/i-3SN9GXC has a bit of padding around the image but the image is only 1024x681.

This image http://jamesfarrell.smugmug.com/Site-Pages/Wildlife-Potpourri/Viera-Merritt for example is only 799x532 and has a lot of blank space.

This image http://jamesfarrell.smugmug.com/Site-Pages/West-and-Southwest/North-Rim-Grand-Canyon/i-r3NSx3s touches the left side and right side of the container, but it is larger at 1800x1199

Try a larger image of say at least 1920x1080 or full size and see if you still have the same separation between the caption and the image.

On my site the large image always touches the container on at least two sides (side-side or top-bottom) and sometimes all four sides depending on the aspect ratio of the image. The more rectangular ratios 16:9, 16:10 will have more space between the image and the caption. I've never adjusted the padding for the large image.

Paul
http://paultavares.smugmug.com/