Line spacing too tight when editing
-
I noticed a couple of days ago, when editing a page or post the line spacing is too close together, however on the published page or post the spacing looks correct. The only work around I found to make the edited page look like the published page is to add the code <span style=”line-height: 1.5;”> to each paragraph. We have several pages that are updated daily and to have to go in and add code to each paragraph is not what I want to do – or should have to do. Is anyone else having a problem like this.
The blog I need help with is: (visible only to logged in users)
-
Make sure you are running an up to date browser version found at https://browsehappy.com
Try clearing your browser cache https://en.support.wordpress.com/browser-issues/#clearing-your-browser-cache
Read all the tips here https://en.support.wordpress.com/browser-issues/
If you are not successful please provide this specific info:
(a) Exactly what kind of device you are using to connect to the internet and to WordPress.com.
(b) Exactly which browser (and version of it) you’re using by checking here if necessary http://supportdetails.com/If you do not succeed type modlook into the sidebar tags on this thread for a Staff follow-up. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Also subscribe to this thread so you are notified when they respond and be patient while waiting. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
Thank you for your fast reply. I am still having the spacing issue on two different computers. I cleared the cache (from the beginning of time) and it still did not make a difference.
#1 Lenovo ThinkCentre 7360D1U, Windows 10Chrome Version 58.0.3029.110 (64-bit)
Microsoft Edge Version 58.0.3029.110 (64-bit)#2 Lenovo ThinkCentre 5536A86, Windows 10
Chrome Version 58.0.3029.110 (64-bit)Firefox Version 53.0.3 (32-bit)My sister works with me on this site, and she is having viewing problems on her laptop and iPad as well.
-
Hi there,
Are you speaking of the line spacing in the editor, or on the published post on the front end of your site? Are you saying that when you first publish the post it looks fine, but if you edit the post the line spacing then changes?
Can you please provide a link to a specific post where this is happening? It would be helpful if you can also provide screen shots – you can upload those to your media library and I can see them there.
-
All of the published pages and posts appear the way they are supposed to. However, when using the editor, the line spacing is too close together. I have uploaded 4 screenshots (home page and post page) to the media library to show what is happening. Please check the home page at https://massacbeeswax.com/ and the post at https://massacbeeswax.com/2017/05/25/superman-celebration-2017/. On the home page, I was able to “force” the spacing to look correct while editing on the “Metropolis City Pool” paragraph by add the code in the text tab editor <span style=”line-height: 1.5;”> to that specific paragraph. I tried to make the code work for the entire page, but it would revert to paragraph only once I clicked back to Visual tab.
-
I am wondering if the problem may be the Twenty Twelve theme. I have another site that uses 2014 theme and it was fine, but when I changed it to the 2012 theme, I got the same line spacing issue. There is some custom CSS on the massacbeeswax site, but nothing has changed in over a year.
The line spacing looks the worst on the WP Admin editor which I prefer to use. On the regular editor, the line spacing looks much better, however the font type and size are not the same.
I added another screenshot page with side by side comparison of both editor pages and the published page. -
Thanks for the links.
On the front end of your site the line spacing is determined by the theme, yes. Some themes space lines closer together, and other themes will use wider line spacing.
If the problem is only in the editor view, though, I don’t really understand why it’s a problem. No visitor to your site will ever see the post in the editor. Only you do.
The spacing used in the editor is specific to the editor. The editor is not influenced by the line spacing settings of your theme, just like it’s not influenced by the font settings of your theme.
On the home page, I was able to “force” the spacing to look correct while editing on the “Metropolis City Pool” paragraph by add the code in the text tab editor <span style=”line-height: 1.5;”> to that specific paragraph. I tried to make the code work for the entire page, but it would revert to paragraph only once I clicked back to Visual tab.
“span” is what is called an inline element. You use span if you want to apply a specific style to part of a line, i.e. just a few words. You can’t add span to add styling to an entire page, and it’s a poor way to add it to a full paragraph.
If you want to apply a style to the entire page, you need to wrap the page in a div-tag, and apply the style attribute to that tag, or you need to add it to the various p-tags in the paragraph.
But you only need to do this if you want to change the way your theme behaves. It’s not the way to change how the editor looks.
-
Thanks for your input. But up until a few days ago, the edit page appeared with exactly the same spacing and font as the published page. I was hoping there was a reason it changed and I could the editor to appear as it does when published.
I know it does not seem important to most bloggers if the edit version looks different, but we have several paragraphs with corresponding thumbnail images that need to be adjusted in size in order to line up correctly. Since it is a newsletter page with events that are updated daily, there are constant changes. And the only way now to see if everything will line up correctly, is to preview, then note where errors are, and go back to editor and guess how to resize the image and preview again.
I will probably try to use the regular editor when I can since it appears closer to the published version. We can make do, but I do miss the way it has worked in the past. Thanks for your input. I learned something today.
-
So it didn’t do that before? Then it could be a recent update to the editor that has some unforeseen side-effects. I’ll check with the developers who work on that editor.
-
-
Oaky, it looks like this may have been caused by a recent update to the WordPress software, but it’s been fixed already on WordPress.com.
Can you please clear your browser cache? That should fix things.
If not, I’ll need to know exact details on what browser you’re using. You can find that here:
I’ll also need a screen shot of the browser inspector. In the editor, right-click on the text with the small line spacing, and select the Inspect Element option (text will vary based on your browser).
That will open a little window at the bottom containing some HTML code on the left, and CSS on the right. We need to see the CSS that’s loading for you. Please take a screen shot of that for me and upload it to your media library, then let me know. This support doc explains a bit more how to use the browser inspector to see CSS:
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
-
On a fresh boot this morning, I saw your message, and cleared cache first thing, then checked both editors, and found the line spacing is still off. I have uploaded 3 images to Media: inspect element for text – side by side view of spacing in both editors and published page, and support details. Hope this helps.
-
Thanks for the info.
The browser inspector screen shot looks like it’s from the published page? I need that for the WP-Admin editor instead, please, as that’s where the line spacing is off. We need to see what CSS is loading for you inside the editor.
Can you also try resizing the CSS portion of the window so more of the code is visible? We specifically need to see any line-spacing rules. You can drag the frame that separates the HTML and CSS sections.
Is it possible for you to check if this also happens in a different browser than Chrome? It would help to know if it’s restricted to just one browser, or if it happens across browsers.
-
It does appear like this might be theme-specific, though, so I’ve asked a developer about that. I’ll let you know if I need additional info from you, but for now you don’t need to send more screen shots.
-
I did upload one more shot of the expanded area of CSS code using Inspect Element. The problem occurs on Chrome, Firefox and Microsoft Edge browsers. Below are the Admin Editor line spacing codes listed in Inspect Element for each browser.
Admin Editor:
Line spacing: 1.4 em – Chrome, Firefox, & EdgeRegular Editor:
Line spacing is 1.5 – Chrome, Firefox, & Edge -
Thanks. I’ve given everything to a developer who works on the WP-Admin editor, but I’ll probably not hear back from him until after the weekend. I’ll keep you posted :)
- The topic ‘Line spacing too tight when editing’ is closed to new replies.
WordPress.com Forums 