Paragraph Spacing Issues...

  • 1
  • Question
  • Updated 7 years ago
  • Answered
How do I change the height between Paragraphs.

I try to edit the margins in the following tag:

I have read other forums and this is what they say to do but it does not work! Is this a Yola thing?

Can anyone help?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
  • nervous

Posted 7 years ago

  • 1
Photo of Will

Will

  • 252 Posts
  • 4 Reply Likes
If you make a new text box for each paragraph you can edit the margins between them. It does take a little while to get used to it and feels some times like trail and error. I tend to start from the top of the screen and work down. After moving them I go to preview to see how it will look live online as in the site builder things can look very different.

www.a-class-driving
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Andi

I am not sure why adjusting the margins is not working for you. It is not a Yola-specific thing. Another way of making the paragraph spacing larger, besides Will's suggestion on this thread, is to use CSS.

If you would like to try it, click on the HTML link in your Text Widget. This will open up the HTML editing screen. You will see the text in HTML format inside the HTML editor.

It will look something like this <p>Paragraph text here</p>. Add this above the paragraphs:

<style type="text/css">
p {
margin-bottom: 20px;
}
</style>

This will make the bottom margin of your paragraph larger. You can adjust the margin by changing the value of margin-bottom to a different number. The larger the number, the larger the margin will be.

If you add this code inside the Text Widget, it will work for the text in that widget. If you would like to add it to all the Text Widgets on your page, then add the code inside an HTML Widget on your page.

If you are a Yola SIlver member, then you can customize the CSS for your site. Click on Style > Edit Custom CSS. Then paste the code in the left-hand screen and click OK. All your paragraphs on all the pages of your site will then have this spacing. If you do not Yola Silver and want the paragraph spacing site-wide, then you will need to add a HTML Widget on each page.

Hope this helps!

Thank you
Nazlie
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I have Yola Silver and am loving the Custom CSS editor! I have tried to add that line of code to both the p tag in the css and my personal tag which I created which goes as follows:

div.contentbox-wide{
width: 860px;
background-position:center;
background: #FFF url('resources/css/modules/css_box_hatch_wide_header.png') no-repeat;
background-position:100% 0%;
border:medium #FF6600 solid ;
padding:0px 3px;
font-family: Gill Sans MT, Arial,Helvetica,sans-serif;
font-size:14px;
color:#000000;
margin-bottom: 10px;
}

But that did not work either!

My site is: www.journee.co.uk and the page that I am trying to do this on is: www.journee.co.uk/times-master.php and it is the first content module that I am trying to edit.

All of the methods suggested (except the first one which would not work in my case), do not seem to work. It isn't so much of a problem but it does take up a lot of space on the already rather long page.

I have also checked the CSS of my menu and it refers to a #menu p to stop itself from attacking the body text. I can not see what I am doing wrong.

And everytime I use the list, the Menu has assigned a CSS3 bullet list which instead of doing a vertical list with bullet points, it does several horixzontal lists which all have CSS3 applied to the corners and this means that when you hover over them the list goes funny and they all lose their positioning.

Ignoring that because that is to do with the menu and I dont want to have to faff around with that anymore, any ideas on the paragraph spacing would be good.

The only other option is to have a table with no borders but that seems a bit excessive as a work-around!

Kind Regards,

Andi
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Andi,
I guess I'm not clear on what spacing you are meaning? Perhaps you are wanting line-height rather than margin?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
The spacing between paragraph ends and the start of the next paragraph. I looked on one forum and it mentioned p + p as a tag? I tried that and it did not work.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Andi

I am not familiar with the p + p tag. Please ensure that, when you are using the css, you are referencing it correctly in your HTML.

For example, with the code you have pasted above: div.contentbox-wide{ make sure that you have the text immediately after the <div>. If your text is in a p tag or a span tag, inbetween the div tag, then you will need do reference it in your CSS.

So if my CSS looks like this: .mycss {margin-bottom: 20px;}, then my HTML will look like this: <div><p class="mycss">Text goes here</p></div>. I can then add it into any tag I want; I can add it to a div, p, span or whichever tag I choose, as long as I add the class name to the tag and the text immediately follows the tag I have added.

i hope this makes sense :) If you need more help, please let me know.

Thank you
Nazlie
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
The rest of the css works, the content modules show up as expected. I have noticed that the margin-bottom css edits the space at the bottom of the content module and not between the paragraphs.

It is only the one situation at the moment, so I shall use a table and keep things simple!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Andi

If you would like to control the line height (spacing), a bit of HTML coding will need to be done. There are two options:

Option 1: Using CSS to control the line-height (this will apply to all your spacing throughout your page)
Drag over an HTML widget and paste in the following code:
<style type="text/css">
p { line-height: 100%; }
</style>
You can replace "100" with a different value - this is what controls the spacing.

Option 2: Use HTML code (this will apply just to specific text or paragraph)
Drag over the HTML widget or use the HTML button on your text toolbar.
Paste in the following code:
<span style="line-height: 40px;">YOUR TEXT GOES IN HERE</span>
You can replace "40" with a different value.

I hope that information is what you're seeking!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I added the lines and nothing. Must be the Menu tampering with the CSS. And can you please remove the feature of the CSS editor where it deletes some html code from the CSS editor if it decides to! It removed all of my menu which meant that it completly mucked up my site, even though it has worked perfectly for the past three weeks!

I am now not liking the CSS editor so much as it has added between 1 and 2 hours of work that I did not have to do before! Grrr. Rant over.

I shall give up on the line-height and stick to using a table for that bit.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I have got it working now...

The menu is a pesky little blighter! It looks good but is a pain in the bottom! I removed all of the line-heights from it and changed the Custom CSS p tag to 50%, and added 5px padding.

Let it be a lesson to you all, if you implement something that has its own CSS, make sure it does not affect the rest of your page!!! It'll save you a lot of time in the long run.

Kind Regards,
Andi North
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Fantastic job Andi! Your perseverance has paid off!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Sanja, that menu has been a pesky little sod!