Gallery description line height too small

linyangchen

I noticed that when my gallery description has multiple lines, the lines are too close to each other such that the descenders of letters on the upper line overlap with the ascenders of letters on the lower line. :huh An example can be seen here if you resize the browser window small enough to squeeze the gallery description into two lines (I have not yet used long descriptions, because of the unsightly line spacing that would result on a normal-sized browser window).

There is no such problem with photo captions.

It could be that SmugMug automatically adds <p> tags to the gallery description - is this actually the case? :scratch I have found that using (my own) <p> tags on my 'About' page causes the same behaviour, and omitting the <p> tags restores proper line spacing.

I have searched around but so far haven't found a way to disable the auto <p> tags (if they exist) in the gallery description. :dunno Does anyone have insights on why this happens and/or suggestions how I could fix this? Thanks for your help.

Yangchen

denisegoldberg

I just did some experimenting with some code to change the gallery description by slightly increasing both the font size and the spacing between the lines. Here's a start at some CSS:

.sm-gallery-description {
    font-size: 110%;
    line-height: 135%
}

Adjust the size and the line-height as desired. I placed this in a CSS block on "entire site".

--- Denise

Jtring

linyangchen wrote: »

I noticed that when my gallery description has multiple lines, the lines are too close to each other such that the descenders of letters on the upper line overlap with the ascenders of letters on the lower line. <img src="https://us.v-cdn.net/6029383/emoji/eek7.gif&quot; border="0" alt="" > An example can be seen here if you resize the browser window small enough to squeeze the gallery description into two lines (I have not yet used long descriptions, because of the unsightly line spacing that would result on a normal-sized browser window).

There is no such problem with photo captions.

It could be that SmugMug automatically adds <p> tags to the gallery description - is this actually the case? <img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" > I have found that using (my own) <p> tags on my 'About' page causes the same behaviour, and omitting the <p> tags restores proper line spacing.

I have searched around but so far haven't found a way to disable the auto <p> tags (if they exist) in the gallery description. <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif&quot; border="0" alt="" > Does anyone have insights on why this happens and/or suggestions how I could fix this? Thanks for your help.

Yangchen

You are quite correct that the gallery descriptions are inside p tags. You can see them by using the developer tools in Firefox or Chrome to look at the html and css sent to your browser. Moreover, your design uses 21px fonts for the gallery descriptions and SmugMug, rather bizarrely, has hard-coded line-height:20px for the p tag in their core CSS. I don't think you can get rid of the p tags, but Denise's fix to redefine the properties for the class containing the gallery description will, of course, override the SmugMug setting. I've my own collection of local patches to deal with the same bug and am contemplating the global approach by inserting

p {line-height:125%;}

into my CSS. Does seems awfully strange to have to patch something for so basic a tag.

Great frog, by the way.

Jim Ringland
jtringl.smugmug.com

denisegoldberg

Jtring wrote: »

....am contemplating the global approach by inserting

p {line-height:125%;}

into my CSS.

Thanks for this - I may change my code as well given that I have text in other places besides the gallery description (although so far I'm happy with the change I made yesterday...).

--- Denise

linyangchen

Denise and Jim,

Thank you very much for the fixes, I don't know why I didn't figure them out myself, but I hope others will find this thread useful. :ivar In my case I just changed the line height globally, since I have no p tags anywhere else to worry about.

Perhaps the next step is to brace ourselves for when (if) SmugMug removes the hardcoding, causing the counterhardcoded 125% line height to be too large.

Glad you liked the frog, it is always a wonderful feeling to be so close to nature.

Yangchen