How to reduce the dark background width of footer widget area

[nichibus]

Hi Andrew,
I would like to reduce the full width dark background of footer widget area, because when the menu is alwais on and the page is short, this go upper the dark background and it isn’t a good effect.
I would like to reduce the full width dark backgroud of footer at the same width of the body.
Thanks,

Nicola

[satoristudio]

Dear Nicola,

thank you for the comment!

To reduce the width of the footer area, please try adding the following line to “style.css” (Appearance -> Editor admin menu):
#main #footer { width: 750px !important; margin: 50px auto 0 auto !important; float: none !important; }

Sincerely,
Andrew | Satori

[nichibus]

Hi Andrew,
I add the line to style.css but now the footer is not responsive.
Moreover its possible to reduce only the widget footer?
I like the footer of copyright at the end of the page full width.
Thanks

Nicola

[satoristudio]

Dear Nicola,

alright, this is trickier, and normally would require changes in the template files, which I consider as (paid) customization work; however, please try this code instead of the previous one:

#main #footer .container #footer-widget-area { padding: 0 !important; width: 750px !important; background: rgb(0,0,0); background: transparent\9; zoom:1; margin-left: 0px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dd000000, endColorstr=#dd000000); -ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#dd000000, endColorstr=#dd000000)”; background: rgba(0,0,0, .90); float: left; }
#main #footer { background: none !important; }
@media only screen and (max-width: 990px) and (min-width: 767px) {
#main #footer .container #footer-widget-area { width: 600px !important; left: 0; }
#main #footer .container { padding-left: 110px; }
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
#main #footer .container #footer-widget-area { width: 432px !important; margin-left: -18px !important; }
#main #footer .container #footer-widget-area .widget-footer { width: auto! important; margin-right: 20px !important; }
}
@media only screen and (max-width: 479px) {
#main #footer .container #footer-widget-area { width: 264px !important; margin-left: -18px !important; }
#main #footer .container #footer-widget-area .widget-footer { width: auto! important; margin-right: 20px !important; }
}

Sincerely,
Andrew | Satori

[nichibus]

You are great!
Thanks very much! Is all OK

[satoristudio]

Cool! I was slightly afraid that this big chunk of code wouldn’t work in some respect, nice that it did :)

[Author]

Posts