Footer border has grey box


#1

Hi
I have added a copy of my website footer area. It has a grey surround around the footer and social media buttons. How can I remove this so that it is all as the background above i.e. black

I look forward to hearing from you.
Best regards,
Roop


#2

Hello Roop,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-footer,
    #pg-45-3 > .panel-row-style {
      background-color: #000000;
    }

Regards,
Kharis


#3

Hi Kharis
Thanks for your help.
It has worked on a few pages of my site but the grey box is still on the footer section on a couple of pages.
Can you assist with this?
Best regards
Roop


#4

Hello Roop,

As they’re separated rows, you could use row background color option under the row settings > Row Styles > Design. Or you could set a custom class name to Row Styles > Attributes > Row Class. For example: my-dark-row

And add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .my-dark-row {
      background-color: #000;
    }

Regards,
Kharis


#5

Hi Kharis,
I am not sure how to find the menu i.e. row settings > Row Styles > Design. Or Row Styles > Attributes > Row Class.
I can’t see any options to get to this menu.
Best regards,
Roop


#6

Hello Roop,

The following screencast might explain it better.

Regards,
Kharis


#7

Hi Kharis,
Many thanks for your continued assistance.
I have tried both methods that you have mentioned, however I am still getting grey boxes at the footer of my site.
Is there anything else I can try?
I look forward to hearing from you.
Best regards,
Roop


#8

Please share a link to the page that the grey bar remains. So I can have a closer look.

Regards,
Kharis


#9

Hi Kharis
The website address is www.instinctselfdefence.co.uk
The grey box ocvurs on the footer of about 3 of the 5 pages of my site.
Do you need my login details too?
Best regarfs
Roop


#10

Hello there,

You should also apply the same row class name to the most bottom section of other pages. Because this’ll override the default background.

Regards,
Kharis


#11

Hi Kharis,
I have applied the same row class to the bottom section of other pages, however this has made no difference.
Can you help?
Best regards,
Roop


#12

Hello Roop,

Could you please share a link of them, so I can check and compare?

Regards,
Kharis


#13

Hi Kharis,
The website link is http://instinctselfdefence.co.uk/
Do you need login details ?
I look forward to hearing from you.
Best regards,
Roop


#14

Hello Roop,

Try this CSS code that will override all row’s background color and set it to transparent.

    .panel-row-style {
      background: transparent !important;
    }

Let me know how it works for you.

Regards,
Kharis


#15

Hi Kharis,
I have just tried this and it has no made no difference.
I look forward to your assistance in resolving this matter.
Best regards,
Roop