• 0
Sign in to follow this  
Followers 0

DMS 2 Unwanted spacing between H2 and paragraph


Question

Posted · Report post

Hi,

 

How do I reduce the space between my H2 headings and my paragraphs using custom LESS/CSS?  I tried finding the answers in the Wordpress forums but to no avail. 

 

Thanks,

Vincent

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Try this instead:

 

.post h2 {
  margin-bottom: 5px;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi primetime

Please post your site's url so we can properly troubleshoot the issue for you.

;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

primetime  I think the spacing actually looks good but you could increase the top spacing if you wanted.  However, to answer your question there are a couple of ways to handle this.  

 

You could change the bottom margin for all h2 level headers using CSS like (see below) and add it to the custom CSS area.  This will change the bottom margin of all h2 elements throughout your site.

 

h2 {

margin-bottom: 10px;

}

 

Or you could add a custom class to the specific section or component and then only that area will be impacted by the CSS.  You would use the CSS below and add "custom-class" to your CSS area of the section or component.

 

.custom-class h2 {

margin-bottom: 10px;

}

 

Again add "custom-class" to your section or component.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

I tried both methods and it's not working.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

primetime - Your issue is that you're attempting to customize your site and have a cache plugin active. If you're still in the process of styling your site, you will need to disable your cache plugin before you go ahead and start adding custom CSS etc...

 

Once you have your sites design finalised, then enable the cache plugin again. Also, please be aware that cache plugins do not work by simply enabling the plugin, they need to be configured to match your server configuration. You will want to contact your web host provider and ask them for assistance. If a cache plugin isn't configured correctly, then it can cause issues on your site.

 

Also, we include some classes in DMS which you can use to remove margins from elements. All you need to do is add them to the tag. For example at the moment you have this:

 

<h2>1) Totoya Michi</h2>

 

If you replace that with the following:

 

<h2 class="zmt zmb">1) Totoya Michi</h2>

 

It will give you the following:

 

https://cloudup.com/cPGmUNG9SFC

 

You can find more about these classes here - http://docs.pagelines.com/tutorials/html-css-utilities

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny I've deactivated my cache and updated my html to <h2 class="zmt zmb">1) Totoya Michi</h2>, this worked for me.

 

When I tried to add h2 {margin-bottom: 5px;} in custom less/css this doesn't work.  I would like to change the H2 margin-bottom site wide.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you provide a screenshot of where you added that custom CSS please.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Attached Danny

Edited by primetime

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It works :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0