How do I close up blank space beneath gallery titles?

ChancyRat · January 18, 2015

I tweaked code from Sherlock: http://www.sherlockphotography.org/Customisations/Rounded-corners and from Aaron, #23 here: http://dgrin.com/showthread.php?t=251338.

Example folder with gallery thumbnails: http://www.joinrats.com/ModifyBehavior/RAT-C

How can I close up the empty space between the bottom of the gallery title, and the very bottom border? Not understanding the css I guessed repeatedly, but nothing touches it. It also can't be affected by the Folder settings (spacing, etc.).

The attached images shows in pink the space I would like to eliminate.

Thanks.

/* Borders for thumbnails in folders, and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile{
    box-shadow: 0px 0px 1px 1px #6B6B6B;
    border-radius: 1px;
  padding: 10px !important;
  background-color: rgba(255, 255, 211, 1) !important;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}


/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p:nth-of-type(1) {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  text-align: center;
  margin-left: 4px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-size: 20px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: auto !important;
 background-color: rgba(255, 255, 175, 1) !important;
}

Hikin' Mike · January 18, 2015

Change this:

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 1.2em 0;
    }

to this should make it closer:

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 0 0;
    }

Hikin' Mike · January 18, 2015

You can also change this:

.sm-page-widget-folders .sm-tile, .sm-page-widget-galleries .sm-tile, .sm-page-widget-nodes .sm-tile {
    background-color: rgba(255, 255, 211, 1) !important;
    border-radius: 1px;
    box-shadow: 0 0 1px 1px #6b6b6b;
    [B]padding: 10px !important;[/B]
    }

to this:

.sm-page-widget-folders .sm-tile, .sm-page-widget-galleries .sm-tile, .sm-page-widget-nodes .sm-tile {
    background-color: rgba(255, 255, 211, 1) !important;
    border-radius: 1px;
    box-shadow: 0 0 1px 1px #6b6b6b;
    [B]padding: 10px 10px 0 10px !important;[/B]
    }

ChancyRat · January 18, 2015

Thank you for checking into this, Mike. Unfortunately I didn't have any version of that code in my site CSS. I tried adding your version but that didn't fix it. Not sure what to do...

Hikin' Mike wrote: »

Change this:

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 1.2em 0;
    }

to this should make it closer:

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 0 0;
    }

ChancyRat · January 18, 2015

Hikin' Mike wrote: »

You can also change this:

.sm-page-widget-folders .sm-tile, .sm-page-widget-galleries .sm-tile, .sm-page-widget-nodes .sm-tile {
    background-color: rgba(255, 255, 211, 1) !important;
    border-radius: 1px;
    box-shadow: 0 0 1px 1px #6b6b6b;
    [B]padding: 10px !important;[/B]
    }

to this:

.sm-page-widget-folders .sm-tile, .sm-page-widget-galleries .sm-tile, .sm-page-widget-nodes .sm-tile {
    background-color: rgba(255, 255, 211, 1) !important;
    border-radius: 1px;
    box-shadow: 0 0 1px 1px #6b6b6b;
    [B]padding: 10px 10px 0 10px !important;[/B]
    }

This was a smidgeon-bit of helpful, thanks! Still got a big fat bottom of empty though.

Hikin' Mike · January 18, 2015

Then add the !important tag...

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 0 0 !important;
    }

ChancyRat · January 18, 2015

Thank you again Mike. That improved things a bit more again, but not fully.

Hikin' Mike · January 18, 2015

ChancyRat wrote: »

Thank you again Mike. That improved things a bit more again, but not fully.

I'm not seeing the '!important' tag, so you still have '1.2em' bottom padding.

.sm-tiles-info-after .sm-tile-info {
    padding: 0.5em 0.5em 0 0 !important;
    }

If you are NOT using captions, you can change 1.3em to '0':

.sm-tiles-grid.sm-tiles-info-after .sm-tile-info p, .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p {
    height: 0 !important;
    }

ChancyRat · January 20, 2015

Mike, fantastic! thank you!

You said something really intriguing - "if I'm not using captions"...

How would I add captions in this context? These are gallery thumbnails in a folder. I thought it was not possible to have captions show up? I would love to add them if that's possible. Here I am trying to seal up space allocated to captions, when the reality is that I didn't know the blank space was for captions, and I thought they weren't even doable.

Hikin' Mike · January 20, 2015

ChancyRat wrote: »

Mike, fantastic! thank you! <img src="https://us.v-cdn.net/6029383/emoji/clap.gif" border="0" alt="" >

You said something really intriguing - "if I'm not using captions"...

How would I add captions in this context? These are gallery thumbnails in a folder. I thought it was not possible to have captions show up? I would love to add them if that's possible. Here I am trying to seal up space allocated to captions, when the reality is that I didn't know the blank space was for captions, and I thought they weren't even doable.

I don't know. I just see this in the HTML '<p class="sm-tile-caption" itemprop="description"> </p>'.

How do I close up blank space beneath gallery titles?

Comments