Thin Line Between Sections Showing On Mobile Phone

[LGFproductionsINC]

I just noticed that when viewing a number of pages on a android phone, when sections next to each other have the same back ground color, there seems to be this thin horizontal line showing where the sections meet. This thin line does not show up on a PC, laptop or tablet display.

I do have a page where this does not happen on the phone, so I know it is possible to have a clean join between sections with the same background color but can’t understand why so many other pages are having this line appear.

Any ideas why this could be happening?

[paul.r]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

[christian]

I only see this in your home page.

What is the page having the issue you described?

Thanks.

[LGFproductionsINC]

I didn’t mention the site isn’t live yet, so just add the /wp-admin

Thanks

[christopher]

Hi there,

I checked the Ruby page with my iPhone and could not find the tiny line that you are talking about This seems to be something related to Android or your device maybe. Kindly make sure that you have updated version of the Android OS and try to check the case with other android phones.

Meanwhile let’s make sure that we are on the same page, give us a screenshot of the section that you see the line on Ruby page to follow up the case.

If the problem is happening for the old version of the Android we can not do anything about, but if it is for the new versions we will follow up the case for you.

Thank you.

[LGFproductionsINC]

Hi

I wanted to confirm with you that my android phone does have the latest OS on it. Also, this was checked on other android phones and the line still appeared on the phone displays. On the android phone, it is more noticeable in portrait mode than in landscape. I am using Chrome to view this.

This issue also seems to be showing up on an android tablet (also using Chrome). The photo I am including here was taken on a tablet so you can see a little better what I am referring to. This was taken on the Diamond page but it is showing up on a number of pages where two sections with the same background color are next to each other. As I mentioned before, it does not seem to be showing up on the ‘Businesses’ page.

While checking into this a little deeper for you, I loaded Firefox onto an android phone and tablet. The line doesn’t seem to be showing up using Firefox BUT what I do notice using Firefox on both the phone and tablet (and also on a desktop PC), it seems to be showing where the column box is by being a slightly different color than the surrounding background color. Take a look at the top of the Diamond page, Section 3 Column 1. The background inside the column is slightly lighter in color.

Any ideas what is causing this?

[ruenel]

Hello There,

This can be caused with your background colors. The section 3, the row and the column have a different background colors. I would suggest that you set the background color of the column and row as transparent. Just let the background color of the section 3 be the color of the row and the column instead.

Please let us know if this works out for you.

[LGFproductionsINC]

Hi

I gave it a try. The column already was transparent but I have now made sure that on Section 3 of the Diamond page that the column and row are both transparent. Even after doing that, the thin line is still showing up on the android phone and Samsung tablet.

[christopher]

Hi there,

Unfortunately, I still can not replicate the issue, we have a bug report regarding the sections thin line if the section separator option is on.

That seems to to be your case but I wonder if you try that. I added the workaround to the Options CSS section:

.x-section-separator-bottom,
[class*="x-separator"][class*="bottom"] {
    bottom: 1px;
}
.x-section-separator-top,
[class*="x-separator"][class*="top"] {
    top: 1px;
}

Kindly check and see if it is the same problem and if the workaround fixes the issue.

If not you need to add a test page and try to add 2 sections and recreate the issue for us. Give us the test page to follow up.

I asked one of my colleagues to double check the case and he mentioned that this is a random one and could not pinpoint the issue. A suggestion is that you remove the gap you added to the headlines and use the Helper Classes to add necessary margins. See if that helps.

Thank you.