reducing inter-paragraph spaces in text blocks

MarkOvergaard

This is the second of my customization assistance requests, all of which relate to my website: www.remarkableimagery.net.

Many of my galleries have multi-paragraph text blocks at the beginning (and there are a few other such multi-paragraph text blocks on my site). Here's an example: https://www.remarkableimagery.net/Exhibit-On-African-Plains. I've created the inter-paragraph spaces by inserting blank lines, but the spaces seem awkwardly large to me. I'd like to reduce their vertical height by at least 50%, but ideally I'd like to have a site wide mechanism that allows me to control that spacing with a single parameter for the entire site.

I would welcome comments and assistance on this goal.

Thanks.

Mark

MarkOvergaard

Sadly, I forgot to include some intended content in my post just above. I had previously found the following recommendation for this topic posted by leftquark in 2015:
+++++++++++
There's currently a 12pixel spacing above and below paragraphs. You can change it by adding a "CSS" block to your page and adding the following code:
.sm-page-widget-text p {
margin: 12px 0;
}
Change 12 to something like 6. If you'd like to only change the paragraph spacing on certain sections of your page, let me know which sections and I can drill down more.
+++++++++++

Is this advice still accurate, 4+ years later? My impression is that on my galleries, that empty line I've inserted appears full size. Maybe there's a way to insert a paragraph break in some other manner?

Mark

Hikin' Mike

@MarkOvergaard said:
Sadly, I forgot to include some intended content in my post just above. I had previously found the following recommendation for this topic posted by leftquark in 2015:
+++++++++++
There's currently a 12pixel spacing above and below paragraphs. You can change it by adding a "CSS" block to your page and adding the following code:
.sm-page-widget-text p {
margin: 12px 0;
}
Change 12 to something like 6. If you'd like to only change the paragraph spacing on certain sections of your page, let me know which sections and I can drill down more.
+++++++++++

Is this advice still accurate, 4+ years later? My impression is that on my galleries, that empty line I've inserted appears full size. Maybe there's a way to insert a paragraph break in some other manner?

Mark

Yes, this still works. If you add this to your site-wide theme's CSS section, this will change that on EVERY Text Blocks. You may or may not want to to that.

MarkOvergaard

Thanks, Hikin' Mike. Since the above most, I've made an additional observation. I create the text blocks at the top of my galleries via entering the text in the Gallery Description. On the other hand, the text block on my About page is within a separate content block of type text, which includes font size and other formatting controls in a line at the top. The inter-paragraph spaces on my About page are less objectionable. I'm wondering if the recommendation you've made applies only to such blocks and not to Gallery Description blocks that I've been using.on my galleries. Is there a way for me to use context blocks of type text on my gallery pages?

Hikin' Mike

Was in the process of posting that I noticed those were not Text Blocks. If you want to get more control of your description text, you can use HTML. As an example of your "African Plain" gallery, this is what you have now:

The plains of Africa are lush with wild beauty and drama, from the tense wariness of a Masai Mara cheetah family to the stark contrast in Amboseli between verdant swamps and nearby dusty lake beds or pans.
<br>
<br>
Over the course of six visits between 2012 and 2018 to various parts of Africa, I’ve experienced and photographed its wild drama. In this exhibit, I share with you some favorites among those images and hope to inspire you to care about and support the conservation of these ecosystems and their wild inhabitants.
<br>
<br>
One organization that supports wildlife conservation around the world in very effective ways (and has raised tens of millions of dollars to fund those efforts) is the Wildlife Conservation Network (WCN,  <a href="http://www.wildnet.org">http://www.wildnet.org</a>).
<br>
<br>
The framed images in this exhibit are pigment inkjet prints. All the images are available for purchase. To inquire about buying an image or for other questions or comments, please contact me via the contact button on the left.

I would use paragraph tags(<p></p>) instead:

<p>The plains of Africa are lush with wild beauty and drama, from the tense wariness of a Masai Mara cheetah family to the stark contrast in Amboseli between verdant swamps and nearby dusty lake beds or pans.</p>
<p>Over the course of six visits between 2012 and 2018 to various parts of Africa, I’ve experienced and photographed its wild drama. In this exhibit, I share with you some favorites among those images and hope to inspire you to care about and support the conservation of these ecosystems and their wild inhabitants.</p>
<p>One organization that supports wildlife conservation around the world in very effective ways (and has raised tens of millions of dollars to fund those efforts) is the Wildlife Conservation Network (WCN,  <a href="http://www.wildnet.org">http://www.wildnet.org</a>).</p>
<p>The framed images in this exhibit are pigment inkjet prints. All the images are available for purchase. To inquire about buying an image or for other questions or comments, please contact me via the contact button on the left.</p>

Then, since SmugMug already wraps the text in a specific class (sm-gallery-cover-description) you can control the paragraphs using CSS if need be.

MarkOvergaard

Thanks, Hikin' Mike. I think we're headed in the right direction. I applied (I think!) your recommendations on the Finding Reverence gallery: https://www.remarkableimagery.net/Exhibit-Finding-Reverence/. However, the inter-paragraph spacing, when determined in pixels, is very small, even for the current setting setting of 36px. Furthermore, I would worry that it will be dependent in an undesirable way on the pixel resolution of the display device. (My current device is a Retina resolution MacBook Pro.) Is there a way to set this spacing in points, so that for instance, 6 points would be half the size of a line in a 12 point font? Or maybe you have some other recommendation. I'm not enthused about the look I get with 36px, but I like the potential of greater control that this path offers. I welcome further comments.

Mark

MarkOvergaard

A further comment in the approach I've taken so far. I decided to put the HTML inside the gallery description, versus in a separate HTML block. I'm thinking now that the CSS block that I added to control the paragraph spacing didn't actually have any effect inside that description block, but I look forward to further comments.

Mark

Hikin' Mike

Now you've added the paragraphs in your description, you can use CSS to add space. Add this to your Theme's CSS section:

/* Gallery Descriptions */
.sm-user-ui .sm-gallery-cover-description p {
  margin: 0 auto 20px;
}

You can change the top (0) and/or the bottom (20px) to suit. Also the auto is for left/right. Probably want to leave those alone.

Hikin' Mike

To add, adding that CSS is a one-time thing. So when you convert your other gallery descriptions to paragraphs, you only need to make changes to that CSS. Make sense?

MarkOvergaard

Thanks, Hikin' Mike. So, I think you're confirming that I should have added this CSS in the Theme's CSS section, versus what I did, adding to the page's CSS. Do you believe that accounts for the fact that my added CSS didn't seem to make any difference?

I'll try your suggestion. I'm concerned, however, that you haven't commented on my note that it might be more device independent to use units of points rather than pixels, if that's a possibility.

I welcome your further comments.

Mark

Hikin' Mike

@MarkOvergaard said:
Do you believe that accounts for the fact that my added CSS didn't seem to make any difference?

I never saw a Text Block on that gallery, so I can't say. The code that leftquark mentioned in 2015 is for Text Blocks and not the Gallery Description.

@MarkOvergaard said:
I'll try your suggestion. I'm concerned, however, that you haven't commented on my note that it might be more device independent to use units of points rather than pixels, if that's a possibility.

I didn't comment because I guess I didn't see it...lol! You have a choice of using px, rem or em.

MarkOvergaard

Thanks for the suggestion of those alternate unit options. I'll read up more, but my initial impression is that either rem or em are more desirable for content that may be viewed on a wide range of screens. I appreciate the bit-by-bit (syllable by syllable) education on CSS and HTML that I'm getting from you!

Mark

Hikin' Mike

No problem. I believe pt is only for fonts in print, not web.

I forgot about using percentage for fonts, margins and padding.