How to remove this white line from bottom of footer (mobile)

I created a footer with 5 icons for mobile version of my site (not desktop version).
There is a white line below the footer icons - when tested on a test-site.
But when I tested on a brand new test site (which I have never used before) - everything looks good.

So, I’m wondering what is causing this.

I have 2 test sites.

One test site - which I have been using for quite some time now. It had plugins etc installed. But to test my newly designed footer, I removed all the plugins, etc. and made it exactly like a new site.
(the footer doesn’t work well on this test site. There is a white-line below the footer in this test site)

And the other test site - is a brand new one which I have never used before for anything.
(the footer works well on this test site)

URL of test site 1

URL of test site 2

Please open both the sites in your mobile phone. And you’ll see what I’m talking about.

Can anyone tell me what is the cause of the issue here in test site 1?

Anyone have any suggestions?

I’m really not understanding what is the cause. Tried everything :frowning:

I believe the line you see at the bottom is the top border for the reply box area.

#reply-control {
    border-top: 1px solid #e9e9e9;

site 1:

Site 1 with border-top for #reply-control removed:

It shows up on site 1 but not site 2 because site 2 does not have that CSS property set. #reply-control in site 2 does not have border-top: 1px solid #e9e9e9;

Site 2:

1 Like

Excellent !
Could you please share me the CSS to hide it?

1 Like

I suppose one way to hide the line without changing anything else is to remove the border-top property if the reply box is hidden.


#reply-control.closed {
    border-top: none;

And see if that works


You are a genius. Your code fixed it. :slight_smile:

1 Like

Awesome, glad you got it all sorted :smile: