Make footer responsive for tab and mobile devices.

Can you help me Make footer responsive for tab and mobile devices?

  • Kris
    • Support

    Hi Phil Samcro

    Hope you are doing good today.

    I add below code in to Appearance -> Customize -> Additional CSS section on your site:

    /*fix for top part of footer*/
    @media all and (min-width:320px) and (max-width: 980px) {
    #home_footer {}
    #home_footer .home_footer_01 {padding:20px 0;}
    #home_footer .home_footer_02 {float:left; margin:0 0 20px 0;}
    #home_footer .home_footer_03 {float:left; margin:0 0 20px 0;}
    }

    /*fix for bottom part of footer*/
    @media all and (min-width:320px) and (max-width: 1100px) {
    #main-footer #footer-widgets .footer-widget {width:100% !important; }
    #main-footer #footer-widgets .footer-widget .fwidget { width:100%; }
    #main-footer #footer-widgets .footer-widget .fwidget .textwidget { text-align:center;}
    #main-footer #footer-widgets .footer-widget .fwidget .textwidget div { width:100%; }
    #main-footer div#text-4 {left:0 !important;}
    #footer-widgets {padding: 20px 0 ; line-height: 30px;}
    }

    To make this correct code I also add ID “home_footer” for bottom row and separate css classes in each box of that row: “home_footer_01 / home_footer_02 / home_footer_03” in home page edit mode.

    Please check your site on tablet and mobile does it look ok now :slight_smile:

    Kind Regards,

    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.