Row Separators show a different color line on page. Inconsistent

I have 4 matching sites. All have developed lines that show on computer and phone where row separators are used. I have tried;

Installing Perth Pro
Adjusting colors in row and in widget
Adding a bottom border of the correct color
Removing the row completely, saving and reading a new replacement row and widget

Honestly, if it can be adjusted I’ve done it. What is really frustrating, 3 of the sites on the 3rd instance do not have the line (the bottom of the 3 on each page, but one site (HARlist) does… and I’ve matched everything to the other sites several times.

It didn’t have these lines before but sometime this year during some update it changed. Other than completely redoing 4 matching sites using another theme, what can be done?

The 4 matching sites:

Perth Theme
http://RealtorsWeb.site
http://AnimatedBusiness.Cards
http://Realtors.Video

Perth Pro Theme (Now)
http://HARlist.com

Hello there,

Try adding the below CSS snippet into your site’s additional CSS option or child theme’s style.css.


.svg-container{  
  position: relative;
}

.svg-container:before{
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid #D07060; /* Adjust the color */
}    

.svg-container.row-sep-b:before{
  top: auto;
  bottom: 0;
}

Let me know how it resolves the trouble.

Regards,
Kharis

Take a look at HARlist.com

The above code did somewhat successfully mask one instance of the issue. There are 3 angled sections on the front page using the row separators.

The top and bottom work. The middle “Contact” section is a different separator and the code makes it worse. The colors are different and different from the top and bottom angles.

This does seem to be an issue that needs to be addressed in a Theme Update since it is one of the main features of the theme.

The make things more confusing, the top and middle angle sections are the same angle but the above code only seems to affect the top and not the middle “Connect” angle section. I truly do not understand this. In the past, when a main feature of one of aThemes didn’t work, it was because of using SiteOrigin widgets. This is not the case here. It is a Theme specific widget that use to work and now, no longer works correctly without the extra line artifacts.

Hello there,

To fix the line on “Contact” section, try adding the below CSS code:


#pg-22-5 + .row-sep-b:before{
  border-bottom: 1px solid #99ccff;
  border-top: none;
  top: auto;
  bottom: 0px;
}

> This does seem to be an issue that needs to be addressed in a Theme Update since it is one of the main features of the theme.

We are aware of this issue. Our developer will be considering to resolve it.

Regards,
Kharis

The middle section still has a “white” line below it… but probably because of the css from first “Fix” to to adjust the top section. I guess I can just use the different angle that works above, change the colors of that section, reverse the page information from left to right… then do that all again on the 3 other matching sites. I was hoping for a simpler solution. I do not know of a code that would only effect the second example of the separators and not the 1st or third.

This problem is apparently visible in Firefox only. From what I can see so far FF has a rendering problem with the SVGs rather than a spacing problem. Will try to come up with a fix as soon as possible.

…It’s Safari as well. Hope your re doing well Vlad. Thanks for the response. J

I appreciate everything you do as well Kharis. Your help has been a life saver for me over the last few years. J

I can’t see it in Safari, Kharis either. You’re not checking on the old Safari for Win, are you?

Anyway, I think FF just needs a bit of help processing SVGs. Please remove all the custom code you’ve added for this task and add this instead:


.svg-container {
	transform: translate3d(0,0,0);
}

we might want to delete this particular “solution” stream. The above codes cause other anomalies to appear in other Theme features. White line appear on top of all of the spinning icons in “services” etc. I have removed all above code from site for now until the next update and will try to work around anomalies by changing things to other choices that seem to work… for now.

From what I can see both on my local tests and by inspecting your site and adding the code, it seems to work fine, without creating any other issues.

Could you please re-add the code I posted just for a bit and maybe to a hard refresh to rule out cache?

Here’s how I see it if I add the code manually on your site through the Inspector: http://imgur.com/a/imnyE
No lines or anything apparently.

I just finished redoing HARlist.com and was about to post what I had to do to get one of the angles to work … let me try this on one of the other 3 sites…

sorry… that didn’t work. It looks Ok because I just changed everything to “right side higher” angles. Even though all three matched, the third one was the original one that was OK to start with. Once I made all three match, the third one developed a white line in the middle (middle content video row). I was able to add the correct color to a bottom border to mask it.

I tried the new code on http://Realtors.video but no change.

All three rows were perfectly matched but no mater what, one of the three rows develop the line problem every time.

In Safari (iPhone and computer browser) there is also a render problem with the Pro version of the top row Contact phone number address / email bar gets blocked behind the top full page image almost every time some I’v e been using this theme on several sites. The only way to get it to render is to grab the bottom corner of the browsers window and start to resize the whole window. Then, it pops into place where you intended it to be.

Yeah, I don’t get it, must be the late hour. I’m looking at realtors.video:

Same results on my local server.

Hello Vlad (and Kharis)

It has been a while and still no response. The latest site I’ve worked on now has a HUGE gap. between a regular row and a Type A Separator. I am, once again, using identical code and layout as previous sites but not getting the same results. For example… Take a look at the one I’ve started TomAllenHouston.com and compare it to LamontGrant.com. You can see I’m trying to do a “triangle” on top and bottom of a video section but it is not looking the same at all. I sent over 2 hours trying different things trying to overcome what ever is going wrong now.

I nothing is going to be done about this and other themes that require Page Builder but do not work well with it, please let us know so we can all just move on. I have 4 new clients waiting on sites and I can’t get past spending hours and hours just trying to get a simple theme feature to work.

If a fix is somewhere in at least the future this year I understand, but if nothing is going to be done I would appreciate a notification so I can find another there to start using and go from there.

Thanks for any response. Jeff

Hi,

The 2 sites you just linked don’t look the same because you have a bottom margin for the row that holds the video on http://www.tomallenhouston.com/. That’s what causing your gap.

Apart from that, I’ll try to see if there’s something else to be done for the separators but, as I showed with the screenshots above, the previous solution should work just fine.

…I know on quick look, it looks like there is a bottom padding. That is the problem. I have just spent another hour trying different things to see if I can work around this ongoing problem. In the past such alignment problems for things like “Projects” were fixed simply by not using siteOrigin widgets. That isn’t working here either.

I have set both the Page Builder lines (including the row separator lines) to 0 and I’ve even set the top/bottom margin to 0 on the widget itself. I’ve cleared the Cache. The gap is still there. This started out as a little 1 pixel line appearing on separator lines in my other sites and now it’s a huge gap. I fear there is an earthquake coming now! It’s keeps getting bigger and bigger!

We actually had an earthquake here a couple of minutes ago.

That being said, I’ve probably not explained it properly. It’s a bottom margin set by the Page Builder and from your admin area you need to go to Settings > Page Builder > Layout > Row bottom margin and set it to 0. It should have already been 0 but for some reason it’s not.