Text style customization

mous_basilis88

Hey, I don't know anything about coding and I would like to ask something. Is there any way to make an accordion-style text with ''read more'' like this? https://www.amivitale.com/photo-story/goodbye-sudan-the-worlds-last-male-northern-white-rhino/ . I would like to have the text narrow and show only the first part and my gallery below, and if someone wants to read the whole text can press the read more button.
Is this possible?
Thanks in advance

Hikin' Mike

Yes, it is possible. I put together a quick tutorial/demo...

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Custom-Gallery-Read-More-Link

mous_basilis88

Wow, thank you so much. Just one more, please.
How to make letters bigger in this text?
How do I leave an empty line between paragraphs?
Thanks again for your help

Hikin' Mike

@mous_basilis88 said:
Wow, thank you so much. Just one more, please.
How to make letters bigger in this text?
How do I leave an empty line between paragraphs?
Thanks again for your help

Add this to the CSS section:

.container p {
  font-size: 2em;
}

.container p::after {
  content: "";
  display: block;
  border-bottom: 2px solid #CCC;
  padding: .75rem 0;
  width: 50%;
  margin: auto;
}

  .container p:last-child::after {
    display: none;
  }

The font-size: 2em is where you change the paragraph font size. I used em, but px is fine too.

To change the paragraph line size/color you want to look at this: border-bottom: 2px solid #CCC;. Right now it is a gray (#ccc) and a 2px size. The width is controlled by the width: 50%.

If you want more space between the paragraphs padding: .75rem 0;. It's shorthand for .75rem top and bottom and 0, left and right. You can use px as well.

Hope this helps.

mous_basilis88

I think I got it
thanks a lot