Spacing on site displaying differently

  • Unknown's avatar
    badblokebob · Member ·

    Some of the spacing on my site (100filmsinayear.wordpress.com) has suddenly started to display differently.

    I included example screenshots on Twitter: https://twitter.com/100films/status/1361373711979405319

    I write and edit my posts in HTML and the issue seems to be related to the

    tag. What used to display as a single line space now shows as a double line space.

    Although I’d like it to just start working again how it used to, I’ve nonetheless tried various different edits to try to create a single line space again, but every permutation of elements results in either a double line space or no space at all (as shown in the 2 screenshots in the tweet).

  • Unknown's avatar
    badblokebob · Member ·

    Sorry, that should be:

    I write and edit my posts in HTML and the issue seems to be related to the <div> tag. What used to display as a single line space now shows as a double line space.

  • Unknown's avatar
    badblokebob · Member ·

    Any chance of this getting fixed?

    I haven’t changed the theme of my blog since I started it, and I haven’t changed the HTML I use to format my posts for many years, so this display issue is definitely a change/fault at WordPress’ end…

  • staff-doublebassd · Staff ·

    Hi there,

    Can you point us to a particular post URL on your site where this particular issue is happening? I did not see any recent posts with the spacing issue. We’ll be happy to take a look.

    Thanks,

  • Unknown's avatar
    badblokebob · Member ·

    Hi, thanks for the reply.

    It’s particularly clear on this post: https://100filmsinayear.wordpress.com/2021/02/05/the-100-week-roundup-24/ Between “Life Is Beautiful (1997)” and “aka La vita è bella” and then the line that follows, you can see the space is much bigger than the single-line spaces between paragraphs in the body of the text. Another example is the space between text and my star-rating image at the end — the space should be the same size both above and below the image, but it is bigger below it.

    Thanks.

  • staff-blorbo · Staff ·

    Hm, interesting, so here’s the affected code:

    <div align="center"><span style="font-size: xx-large; font-family: lato;"><strong>Life Is Beautiful</strong></span><strong>
<span style="font-size: large; font-family: lato;">(1997)</span></strong></div>
<div align="center">aka <i>La vita è bella</i></div>

    The thing is, no recent changes have been made to the theme that would affect this in particular.

    You said this worked well on past posts? Would you mind sending over a URL of one we can compare to?

  • Unknown's avatar
    badblokebob · Member ·

    The problem is that whatever has changed is affecting all posts, old and new, so I can’t link to an example of how it used to look.

    I do happen to have a saved offline version of my About page from years ago which still displays correctly, while the live version (https://100filmsinayear.wordpress.com/about/) does not — at the top, the space between “12 months. 100 films. Hopefully.” and “My task is simple [etc]” is bigger than it used to be.

    The code in the saved version goes:

    <div align="center"><strong>12 months. 100 films. Hopefully.</strong></div>
<p></p>
<p>My task is simple [etc]

    But in the live version, it’s:

    <div align="center"><strong>12 months. 100 films. Hopefully.</strong></div>
<p>
::before
</p>
<p>My task is simple [etc]

    I don’t know what ::before is or where it comes from?

  • staff-blorbo · Staff ·

    Hm, you’re right, comparing https://100filmsinayear.wordpress.com/2020/12/30/the-100-week-roundup-17/ to https://web.archive.org/web/20201230131551/https://100filmsinayear.wordpress.com/2020/12/30/the-100-week-roundup-17/

    I’ll see if I can track down what happened.

  • Unknown's avatar
    badblokebob · Member ·

    Hi. I don’t suppose there’s any development on this?

    Thanks.

  • staff-blorbo · Staff ·

    Hi there yes, so good news and bad news, but mostly good news.

    After digging deeply into this and discussing it with several colleagues, the issue is an intentional change in the new editor.

    In short, empty tags (which you had been using for vertical space) are no longer ignored. The ::before is added so that folks can style it as desired, like adding more or less vertical space.

    In your case, it was a bit too much vertical space, of course.

    I have added a Custom Design upgrade, free of charge, to your site: https://wordpress.com/support/custom-design/custom-css/

    And I’ve added the following CSS:

    /* Ignore blank paragraphs / kp */
p:empty::before {
	content: none;
}

    This removes the additional spacing, essentially retuning it to how it functioned before.

    Sorry for the trouble!

  • Unknown's avatar
    badblokebob · Member ·

    Awesome! Thank you so much for getting that ironed out.

  • The topic ‘Spacing on site displaying differently’ is closed to new replies.