How to reduce the dark background width of footer widget area

Front page Support Forums Kabuki Theme Support How to reduce the dark background width of footer widget area

This topic contains 5 replies, has 2 voices, and was last updated by  satoristudio 4 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #640

    nichibus
    Participant

    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

    #647

    satoristudio
    Member

    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

    #654

    nichibus
    Participant

    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

    #662

    satoristudio
    Member

    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

    #674

    nichibus
    Participant

    You are great!
    Thanks very much! Is all OK

    #678

    satoristudio
    Member

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.