How to reduce space before and after title / header text

[darrynbrickappraisals]

hi,

can anyone assist as to how to reduce space as highlighted in attached screenshot?

looked for it in customiser / theme options, but couldnt seem to find it?

thanks,

daryn

[jade]

Hey Daryn,

There is a default top margin for the heading elements. To get rid of that, please add the class mtn to the h2 element on that page like this:

Please check this link for more CSS Ready Classes available that you can use:

@ThemecoKB

Utility Classes

The classes listed in this section are not meant to be targeted with CSS to alter their styling or functionality. Instead, these classes already perform a specified action and are meant to be used with various elements when needed.

Spacing Helpers

In order for pages to be structured properly, all elements must receive some type of margin or padding for adequate spacing. While this spacing is beneficial in most cases, it might be something you wish to remove or modify at other times. We have provided plenty of helper classes to use in these instances. These helper classes allow you to modify the margin and padding of elements by removing the spacing completely, or adding a small, medium, or large amount of spacing. These classes are an acronym built from three different parameters:

1. Margin (m) or padding (p).
2. Top (t), left (l), right (r), bottom (b), vertical (v), horizontal (h), or all (a).
3. None (n), small (s), medium (m), or large (l).

For example, if you wanted to add a class that removed all of the margin from the top of an element you would use mtn, which stands for margin top none. Alternately, if you wanted to add a small amount of padding to both sides of an element you would use phm, which stands for padding horizontal medium.

To figure out where the spacing on an element is coming from, you can easily do this in Chrome. Simply right click on any element and select Inspect Element from the dropdown. This will reveal a popup at the bottom of your window, which will display HTML on the left and CSS on the right. You can hover over the HTML in the popup and select elements to see where any margin or padding is coming from. Margin is designated by a reddish/orange color and padding is designated by green.

Spacing: None

• mtn

• mrn

• mbn

• mln

• mvn

• mhn

• man

• ptn

• prn

• pbn

• pln

• pvn

• phn

• pan

Spacing: Small

• mts

• mrs

• mbs

• mls

• mvs

• mhs

• mas

• pts

• prs

• pbs

• pls

• pvs

• phs

• pas

Spacing: Medium

• mtm

• mrm

• mbm

• mlm

• mvm

• mhm

• mam

• ptm

• prm

• pbm

• plm

• pvm

• phm

• pam

Spacing: Large

• mtl

• mrl

• mbl

• mll

• mvl

• mhl

• mal

• ptl

• prl

• pbl

• pll

• pvl

• phl

• pal

Hope this helps.

[darrynbrickappraisals]

thanks Jade,

i will try it now.

regards,

darryn

[darrynbrickappraisals]

Thanks Jade,

I tried it and placed it on page : https://www.myopinions.co.za/terms-of-use/

Terms of Use

There is no change in the space above or after : terms of use:

Perhaps i wasnt too clear in my question earlier or i have done something wrong?

please advise?

[darrynbrickappraisals]

Sorry Jade, i forgot to mention i placed it in the following place, which might be incorrect?

[jade]

Hey Daryn,

No, please do not put the HTML code in the body class field. You will have to edit the actual page content of those pages and add the class to the heading element such as the h1, h2, up to h6.

You can switch the editor into html mode so you can see all the html code of the page content.

Hope this helps.

[darrynbrickappraisals]

Thanks Jade,

I will try it now. Much appreciated.

Regards,

Darryn

[lely]

You’re always welcome!

Let us know if you need further assistance. Thank you.

[darrynbrickappraisals]

Hi Lely,

Sorry i am extremely intellectually challenged. I am trying to find where i can switch the editor to html mode as the classic editor doesn’t show the html code of the page?

Please would you steer me in the right direction please?

Darryn

[darrynbrickappraisals]

Hey Lely,

I tried this in classic editor: text and have screenshot the attached and placed code Jade said i should use?

Not sure if i am doing the correct thing?

Darryn

[jade]

Hi Darryn,

Yes, that is right. The HTML mode of the default Wordpress editor is the Text tab.

You just have to add the class suggested to the heading tags such as h1, h2. h3, to h6 to get rid of the default top margin.

Hope this helps.

[darrynbrickappraisals]

Hi Jade,

I did that and no difference as per my screenshot?

[jade]

Hi Darryn,

I am not sure what you mean because the default space above the heading was remove after you have added the class.

Here is now it looks without the class:

And here is now it looks now:

As you can see, the gap above the heading has lessened.

If you want to further decrease the gap between the header to the top area of the container, you will have to add more custom CSS since there is a default 60px padding between the default content area of the page. To do that, please add this code in X > Theme Options > CSS:

.page-template-default .x-container .x-main .entry-wrap {
    padding: 30px 60px;
}

Feel free to play around the padding value in the code above.

Hope this helps.

[darrynbrickappraisals]

@Jade

.page-template-default .x-container .x-main .entry-wrap {
padding: 30px 60px;
}

Thanks Jade, you are a superstar!!! Thats exactly what i was looking for…

Darryn

[jade]

You’re most welcome, Darryn.