• 0

Extra Space on Top of Text When Using Columns


Question

Posted · Report post

Hello - I have looked everywhere for an answer to my problem so as a last resort I am posting it here in the hope that one of the many brilliant people here can help a sister out.  I am using the "Columns" plugin to create 2 columns on my site www.new.saddlreydresch.com

 

The problem is that there is a lot of extra space above the column (between the nav bar and where the text starts).  You can see the extra spacing issue here:

http://new.saddlerydresch.com/the-couture-line/

 

How do I get rid of this extra space between the nav bar and text?  I have checked the HTML and there are no extra HTML tags I can see.  I have tried to put the <h2> tags on the same line as the [column] shortcode, but it keeps pushing the tag and text to the next line the minute I click off the HTML screen, so that it looks like this the moment I leave the page:

 

[column-group][column]
<h2>Every saddle unique, no compromises.</h2>
<h3>Couture Line
Made-to-Measure Saddles
Price: $4,900.00 plus tax</h3>

 

In short, I have tried everything I know of to get this extra spacing removed.  Any ideas or advice on what I can do to make this work?  Many thanks!
 

 

 

 

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Hi,

 

To resolve your issue, first need to understand that Wordpress loves to add <p></p> tags when you do a line break. So to stop this lonely <p> tag appearing above your column, what you will need to do is use our [pl_raw] shortcode.

 

What this does is stops Wordpress from generating <p> tags each time you do a line break. So what I suggest is you go to your page where you have the [column] shortcode and wrap the [pl_raw] shortcode around it, for example:

 

[pl_raw]

 

[column-group][column]

 

You text here

 

[/pl_raw] 

 

Add [/pl_raw] to the bottom of your page content, then save and this should strip the <p> tag at the top of your content.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

I found this:

<div class="column column-number-1 column-span-1">
<p></p>
<h2>Every saddle unique, no compromises.</h2>
 
You'll see that HTML code includes an unwanted empty paragraph.  Likely, that's the result of pressing the Enter key before adding the <h2> and its content. That empty paragraph can be easily removed from the edit screen in text mode.
 
To remove the margins from the h3, this code will do it generally, for all posts:
.hentry h1, .hentry h2 {
    margin: 0;
}
 
If you need that to be post specific, try
.post-id-15 .hentry h1, .hentry h2 {
    margin: 0;
}
That CSS code should be added to Custom Code.
 
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

 

Thank you so much for your reply!  Somehow that extra paragraph is getting put in a place I don't know how to access.  Attached is a screen shot of the text editor, where you can't see this extra code you are referencing.  Unless I am doing something wrong? Many thanks!!!  :-)

 

 

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I knew this forum was where all the smart people hung out!  Many thanks, Danny, for your solution.  It worked!!!  :-)

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