Support » Developing with WordPress » Create three footer widget position responsive

  • Hi Friends!
    I’ve created three new footer widget, and I would like these three to be positioned one below the other in the mobile view.

    I’ve used these codes:

    “function.php”:

    /* REGISTER WIDGETS ------------------------------------------------------------*/
    
    if (function_exists('register_sidebar')) {
        register_sidebar(array(
            'name' => 'Footer Left',
            'id'   => 'footer-left-widget',
            'description'   => 'Left Footer widget position.',
            'before_widget' => '<div id="%1$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
        ));
    
        register_sidebar(array(
            'name' => 'Footer Center',
            'id'   => 'footer-center-widget',
            'description'   => 'Centre Footer widget position.',
            'before_widget' => '<div id="%1$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
        ));
    
        register_sidebar(array(
            'name' => 'Footer Right',
            'id'   => 'footer-right-widget',
            'description'   => 'Right Footer widget position.',
            'before_widget' => '<div id="%1$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
        ));
    
    }

    “footer.php”:

        <!-- footer -->
        <div id="mainfooter-stacco">
    
            <!-- 1/3 -->
            <div class="footer-left-stacco">
                <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer-left-widget') ) ?>
            </div>
            <!-- /End 1/3 -->
            <!-- 2/3 -->
            <div class="footer-center-stacco">
                <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer-center-widget') ) ?>
            </div>
            <!-- /End 2/3 -->
            <!-- 3/3 -->
            <div class="footer-right-stacco">
                <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('footer-right-widget') ) ?>
            </div>
            <!-- /End 3/3 -->
    
        </div>
        <!-- /End Footer -->

    “style.css”:

    #mainfooter-stacco {
        width:100%;
        text-align:center;
    }
    
    .footer-left-stacco {
    /*    position: relative; */
        float: left;
        width:100px;
    }
    
    .footer-center-stacco {
    /*    position: relative;
        float: center; */
        display: inline-block;
        margin:0 auto;
        width:100px;
    }
    
    .footer-right-stacco {
    /*    position: relative;*/
        float: right;
        width:100px;
    }

    Actually the result on mobile is terrible: https://www.awesomescreenshot.com/image/3802965/333fe692fe3718f1fe5e91e027e9c70e

    How could I solve this issue?

    Many many thanks!

    Davide

Viewing 2 replies - 1 through 2 (of 2 total)
  • 1. Consider changing the names, since widget areas are not widgets.
    2. Why do you need more than one area when you can’t control what is put in there and where they are positioned?
    3. Responsive CSS almost never uses pixels. You can use it as a min-width or on a media query, but a percentage is best for width or max-width.
    4. There is no such thing as float: center.
    5. It’s a bad idea to use text-align: center because it’s inherited. So every widget will have it, which is not good.
    6. In order to have items side by side, you need to control the width and display properties. Float is best used for text wrapping around something.

    Hi Joy and thanks for your suggestions, especially the “max-width” parameter!
    So. I’ve changed the css code and now it seems to me works fine!

    #mainfooter-stacco {
        width:100%;
        text-align:center;
    }
    
    @media all and (max-width: 800px) {
    .footer-left-stacco {
    /*    float: left; */
        max-width:100%;
    }
    
    .footer-center-stacco {
        margin: auto;
        width: 50%;
    }
    
    .footer-right-stacco {
    /*    float: right;*/
        max-width:100%;
    }
    
    }
    @media all and (min-width: 801px) {
    
    .footer-left-stacco {
        float: left;
        max-width:33%;
        min-width: 33%;
    }
    
    .footer-center-stacco {
        margin: auto;
        width: 33%;
    }
    
    .footer-right-stacco {
        float: right;
        max-width:33%;
    }

    https://www.awesomescreenshot.com/image/3803513/6ac2cce2acbf1524260385364e13dcc3

    • This reply was modified 6 months, 2 weeks ago by  danjde.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Create three footer widget position responsive’ is closed to new replies.