[Resolved] No spacing after paragraphs (after hitting "enter," twice)
Right after the 3.9 update was installed, when I type a post, there is no longer any spacing after paragraphs (after hitting “enter,” twice). It now looks like one long column. I did, however, get 2 posts to partially, make the spacing, while other posts still will not make a space between paragraphs. It looks silly, and really want to get it fixed, as it look unprofessional! My website is http://eagleeyedeals.com/. The post http://eagleeyedeals.com/2014/04/dillons-matchups-ad-423-429/ is an example of a post that will NOT work. Please help! Here’s what the NON working post looks like in the visual.
Can you see the difference in the size of gap between http://eagleeyedeals.com/2014/04/apple-market-matchups-ad-423-429/, under “Produce” and http://eagleeyedeals.com/2014/04/dillons-matchups-ad-423-429/, under “Produce?”
In this post (http://eagleeyedeals.com/2014/04/apple-market-matchups-ad-423-429/) you have a bunch of empty
<p></p>tags, which is probably what’s causing those large gaps between items in the “Produce” section. If you copy-and-pasted from another word processing program, the empty paragraphs may have accidentally been copied over. Edit that post and make sure to check in the text editor rather than the visual editor to see if there were any empty paragraphs inadvertently added.
Edit: Oh, I think I misunderstood what you wanted. Do you want the site to look like Dillons Matchups or Apple Market Matchups?
I hand typed that post, so what would make it do that? When I type the posts now, I press “enter” twice at the end of the row, but it doesn’t keep that amount of spacing.
Hi again! 🙂
Let’s see if we can give this another try.
Try this in a dummy/test post:
<p style="margin-bottom: 50px;">This is one paragraph.</p> <p>How much space is between us - between up there and down here?</p>
And see what happens? There -ought- to be 50px worth of space between the two paragraphs.
Also, are you familiar with adding CSS to your theme?
Also, to address what you just said about the double Return not doing a double paragraph.
If you are in non-Visual editor mode, double Return key won’t give you double paragraph spacing. In Visual editor mode, I’m not sure if it will or not.
Generally speaking, though, it is not a native ‘feature’ in the sense that in most normal cases, extra gaps caused by extra paragraph empty tags is considered extraneous markup rather than a desired effect.
The good news is, with some CSS styling, you can achieve that extra space without extra paragraph tags which is what I will try to help you to do.
I made that test post. And I was doing that double return in “Visual.” Will that large gap only be if I press return twice? I just didn’t want the double return sized space between everything. Just between deals.
Quilted Northern Toilet Paper, 12 dbl roll – $4.98
Use $.55/1 quilted northern toilet paper, 12 dbl roll (RP 4/06) exp: 5/06
Or $.75/1 quilted northern ultra plush or ultra soft & strong toilet paper, 12 dbl roll+ (facebook.com)
Or $.45/1 quilted northern ultra soft & strong toilet paper (quiltednorthern.com)
= as low as $4.23
END OF DEAL #1
START OF DEAL #2
Brawny Paper Towels, 6 big rolls – $4.98
Use $.55/1 brawny paper towels (RP 4/06) exp: 5/06
Or $0.55 off any Brawny 2 Giant Roll or larger (coupons.com) *redeemable at Walmart
For this example that I gave you, it’s best to do it in the non-Visual editor so you can see the code. I am unsure what happens if you attempt to do this in the Visual editor.
Just input what I gave as an example, save, and take a look.
What should be happening is you will see both sentences… but there will be a bigger gap than normal between them.
Once we can confirm that it works, then you will need to do that paragraph styling for the Deals sections like you mentioned… and only the Deals section.
Edit: I just turned on Visual mode to test and while you can type up the majority of your post using it, you would need to swap to Text mode to add in the specific margin code that I showed you.
It did make a bigger gap. Not sure what we need to do though. The deals aren’t a section. Between everything that gets a double return, is a “deal” when I’m typing.
Here is what all of my posts looked like last week: http://eagleeyedeals.com/2014/04/harter-house-matchups-ad-416-422/
Now they look like this: http://eagleeyedeals.com/2014/04/harter-house-matchups-ad-423-429/
Does that help?
Yes that does, thank you.
So you need the extra spacing to appear between each listed deal like it does in the post that shows the extra spacing.
So when you type in a deal – let me give an example of say the Head Lettuce – after you type the deal in, swap to Text editor rather than Visual.
You ought to see your Head Lettuce deal formatted in HTML with the
<p>tags. Currently it has a color attached to it for styling.
This is what it looks like to me when I see the HTML:
<p style="color: #444444;"><strong>Head Lettuce – $.89</strong></p>
We need to edit this (and this is for each deal you type out to make sure you get appropriate vertical spacing between each one).
This is what the edited version looks like with that margin code added in:
<p style="color: #444444; margin-bottom: 50px;"><strong>Head Lettuce – $.89</strong></p>
When you save after making this edit, there ought to be a bigger space between the Head Lettuce deal and whatever deal is right below it (regardless of how many Returns you hit).
Does that make sense?
Yes, that makes sense. Did you notice some of the deals (on the page I’m aiming for) have 1 or more lines under them that has their coupon info, that are closely spaced (only hit enter once)? Will I still be able to do that too?
Yes, you still will. 🙂
To elaborate on that margin code I gave you, that should ONLY apply to the line of text you apply it to and – given how the Visual Editor is now behaving – nowhere else.
So go to the Meat area as an example:
Let’s say you gave this: Angus Boneless Beef Rump Roast, fam twin pk – $2.99 lb an extra margin code.
Now below it, you have Buy (1) Bacon Wrapped Filet Mignon, 8 oz, Get (1) 6 oz FREE deal.
Since it has the coupon code/deal information right below it, you don’t need that bigger margin space.
In which case, just type and format normally (single Return is fine) and it will have the ‘normal’ spacing between the deal title and the coupon code/deal information.
Now on the Boston Pork Roast w/ Bone-In – $2.49 lb you can do the margin code again to give you that bigger space.
When you look in your Text editor, what it would probably look like is:
<p style="color: #444444; margin-bottom: 50px;"><strong>Angus Boneless Beef Rump Roast, fam twin pk – $2.99 lb</strong></p> <p style="color: #444444;"><strong>Buy (1) Bacon Wrapped Filet Mignon, 8 oz, Get (1) 6 oz FREE</strong></p> <p style="color: #444444;"><em>With additional $20 purchase, limit 5 sales</em></p> <p style="color: #444444; margin-bottom: 50px;"><strong>Boston Pork Roast w/ Bone-In – $2.49 lb</strong></p>
If you find that you need to decrease or increase that margin size, you can freely alter that
50pxto whatever you want.
So let’s say you want a bigger gap between the With additional $20 purchase, limit 5 sales deal information and the deal below it. But let’s also say you don’t want it to be as big as 50px.
What you could do is this:
<p style="color: #444444; margin-bottom: 30px;"><em>With additional $20 purchase, limit 5 sales</em></p>
Basically, you can apply – or not apply – the code as you wish where you need it to and change the pixel size of the margin accordingly.
Also, since that margin code takes care of the gap/spacing problem between deals, you no longer have to hit the Return key twice. 🙂
Ok, in this post, http://eagleeyedeals.com/2014/04/dillons-matchups-ad-423-429/, I just added that code to the first 3 deals and it worked! Updated it that way and it kept it. So, will I have to do this to every single deal from now on?
I don’t know why it did this all of a sudden. It had to be the update. I immediately noticed in the “text,” not the “visual,” since I have to embed codes for my affiliate programs, that the “text,” coding looked totally different after the update.
Yes, you would need to do this to every deal from now on.
Given that you use the Visual Editor, this is probably the easier way for you to do it and to keep track of it as you type in the Visual Editor and swap to Text Editor.
(There IS another method, but because you need to specify it for each and every deal listing, unless you’re very comfortable with editing HTML and CSS, I wouldn’t recommend it at this stage as it would involve some restructuring of how you make posts along with additional custom CSS coding.)
And yes, I believe, too that the new update is what caused this change and unfortunately it has caused some trouble with the Post and Page-writing Visual and Text Editors.
(Personally, until I visited the forums, I had no idea it happened since I turn off Visual Editor since I often do custom formatting in my posts.)
Remember how I said that text formatting in a word processor is different from text formatting in HTML?
Because of ongoing changes to the web (HTML coding standards and how web browsers interpret them), WordPress as a web-based application to help people like us publish on the web also has to follow the same standards and also has to keep up with the changes.
Unfortunately, sometimes that means making changes to a function or feature that ‘breaks’ how something was being done in the past… but ‘fixes’ things going forward in the future for the longer term.
As such, your website should now have a smoother time ‘keeping up’ with the changes in the world wide web. 🙂
I hope everything goes smoothly for you from now on and I’m sorry you had to go through that frustration!
First of all THANK YOU so much for at least finding a way, no matter how tedious, for me to fix the problem. I just think it’s hard to read without that extra spacing between each deal and my viewers are use to reading it the old way.
I’m not very comfortable editing too in depth in CSS. I did change/mess around with the line-height in CSS earlier, thinking that would fix it. It didn’t.
I’ll just cross my fingers that another update happens and it fixes itself!
I’d make you a pie all the way from MO if I could, for helping me out. haha!
LOL I used to live in MO! 🙂
And you are VERY welcome.
I have to agree; for someone scanning a site, a lot of text clumped together can be hard on the eyes so I understand why you’d want to adjust the spacing for visual sakes and also to retain a uniformity with the rest of your site (which had the double spacing going on).
A word processor will process and print out a document regardless of its formatting (unless we’re talking about the edges of the paper), but here on the web, the ‘instructions’ and how web browsers interpret them is just not quite the same and so we have to adapt accordingly.
Good luck and happy WordPress! 🙂
- The topic ‘[Resolved] No spacing after paragraphs (after hitting "enter," twice)’ is closed to new replies.