Deprecated: Function get_currentuserinfo is deprecated since version 4.5.0! Use wp_get_current_user() instead. in /var/www/html/wp-includes/functions.php on line 5383

How to reduce the dark background width of footer widget area

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

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
    mmsatoristudio
    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
    mmsatoristudio
    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
    mmsatoristudio
    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.