Jump to content


Photo
- - - - -

Extra Space on Top of Text When Using Columns

colums spacing

Best Answer Danny , 29 September 2013 - 11:35 AM

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.

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 tarynvoget

tarynvoget

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 28 September 2013 - 12:38 AM

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.saddleryd...e-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!
 

 

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 September 2013 - 08:10 AM

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.
 
 


#3 tarynvoget

tarynvoget

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 28 September 2013 - 06:40 PM

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!!!  :-)

 

 

 

 

Attached Files



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 September 2013 - 11:35 AM   Best Answer

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.



#5 tarynvoget

tarynvoget

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 15 October 2013 - 04:30 AM

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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 October 2013 - 11:51 AM

No problem!







Also tagged with one or more of these keywords: colums, spacing