Space between gallery title/description, and gallery title/gallery

Jana Bess

Hi, how can I tighten the space between gallery title/description (example): https://www.darkshadowsplay.com/DarkShadows/Locations/
and between gallery title/gallery (if no description): https://www.darkshadowsplay.com/Miscellaneous/Fan-art/

Thanks

Hikin' Mike

Only way is to change your font. There is no margins or padding. This is a partial screen shot of your site using your default headers (Open Sans):

Hikin' Mike

You could try to add line-height: 1 to your titles:

.sm-user-ui .sm-gallery-cover-title {
    font-family: Qwigley;
    line-height: 1;
}

Jana Bess

Thanks Mike. I tried the line height, didn't affect it. It is bothersome, so I am thinking of changing the font. My site is about a gothic soap opera (Dark Shadows), so I would like to use a font with an old world and/or broadly played feel to it. Is there a way to pick a font for use in SmugMug that I know people will see on their end? Or should I just assume the best way to make sure the font displays for everyone is to add the CSS for the chosen font, similar to what you made for me for Qwigly? (as follows):

/* latin-ext */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: 400;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v8/1cXzaU3UGJb5tGoCiVVmimmB.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Qwigley';
font-style: normal;
font-weight: 400;
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v8/1cXzaU3UGJb5tGoCiVtmig.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Hikin' Mike

The line-height works. This is a screen shot.
Normal:

Line-height:1

The only way to have everybody see Qwigley is to add the @font-face.

Jana Bess

Hey, it does work. I just didn't look close enough. And it allows tenths for fine tuning. Good deal. Thanks as always!!

Hikin' Mike

I don't like using negative margins, but you could add margin-bottom: -10px; to your title code.

Hikin' Mike

I noticed you have two instances for your font in your CSS:

/* Add line-height to gallery title*/ 
.sm-user-ui .sm-gallery-cover-title {
    font-family: Qwigley;
    line-height: .8;
}

and here:

/* Set font for gallery title */
.sm-user-ui .sm-gallery-cover-title {
  font-family: Qwigley;
}

Since the second one is below your @font-face, I would remove this:

/* Add line-height to gallery title*/ 
.sm-user-ui .sm-gallery-cover-title {
    font-family: Qwigley;
    line-height: .8;
}

Then add the line-height and margin-bottom to the second instances. Make sense?