Archived topic
Separators disappearing
16 replies · Started by Scott on March 26, 2020
Hi
Not sure if this is out of scope but thought I'd give it a go as may be an easy fix.
I'm using Gutenberg and have an ongoing issue of my separators disappearing. It's usually only say one occurrence per post. Sometimes none, sometimes more. I think it has something to do with the code from blocks above or below encroaching and covering them up. But I don't really understand how this works.
Is there some CSS I could use to add a little padding above and below all separators on the site that may help with this? The site has ~200 posts so it would be great if there's a fix I can apply site-wide.
Here's the HTML for the separator, if it helps.
<hr class="wp-block-separator is-style-wide"/>
Thanks
Scott
Hi there,
Is the issue visible in the link provided?
If so can you guide me to the section?
As for the spacing, try this CSS:
hr.wp-block-separator.is-style-wide {
margin-top: 40px;
margin-bottom: 60px !important;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Hi Leo
Thanks for the reply. I've added the CSS but can still see a few instances of the issue.
And yes it is visible on the post I've linked. There should be a separator immediately before each H2. I'm currently seeing the issue before the last and second last H2. However, it comes and goes if you refresh the page.
Hi there,
did you resolve this ? I tried on several browsers and the HRs are all visible ....
Try adding this CSS temporarily to make the HR really visible:
hr {
background-color: #000;
height: 2px;
}
Hi David
I can still replicate the issue on that post. It's occurring either before the second H2 or before the last two H2s. It moves around when the page is refreshed. I've cleared my cache and also accessed in incognito.
The issue comes and goes and moves from one separator to another when I refresh the page. Some pages are fine but most have at least one occurrence of the issue.
Can you think of anything else that may be causing it?
I've just added another URL where I'm seeing the issue
I can see a separator above each <h2>. Where else did you add it that's not showing?
Just above each H2. Have you tried both posts?
And above "Related Posts" at the end.
Yup checked both posts and definitely seeing a separator above each h2 and the related posts.
Any specific one that isn't showing to you?
I've just gone into the first URL and can still see the issue above the 6th and 7th H2s.
I've just tried using Safari (was previously in Chrome and Chrome Incognito) and I cannot replicate the issue there. So I guess it must have something to do with the browser.
Appreciate there's not much you guys can do to help if you can't replicate so happy to close the ticket unless you have any further thoughts?
This is the 6th title:
https://www.screencast.com/t/vzr7viHg
and the 7th:
https://www.screencast.com/t/pO7E2QG2Lzi9
Definitely let us know if you need another look :)
Hi guys,
One thing I've noticed with Chrome (and Opera), is having a zoom setting other than 100% will cause this very same issue. Not sure if that's what is happening here, but thought I'd mention it as a possible cause.
You may want to check if you have a default page zoom setting applied in Chrome.
It's an odd problem because it only happens to some 1px lines on the screen and only at some zoom levels, similar to how you described it. If I had to guess, it has to do with how Chrome does sub-pixel calculations for its page magnification. I've never found a workaround, unfortunately.
Again, not sure if that's what is going on here, but it's a possibility so figured I'd share. Issues like these can be super frustrating to pin down.
I just played around with the zoom settings a bit and it seems to only disappear at 50%.
Not much we can do about that though.
For sure, Leo. It's an odd quirk of Chrome.
Have a pleasant evening.
You as well!