float widgets footer area doesn't work

  • Happyhealthynl

    (@happyhealthynl)


    11 years, 5 months ago

    Hi,
    I’ve got a problem on my blog Happy-and-healthy.nl. I can’t get the footer widgets to float. Can you maybe take a look and see what i am missing?!?
    i’ve tried all I could think of. I have used the yoko theme but made lots of adjustments.

    Hope someone out there can help me 🙂

    this is the footer bit in style.CSS:
    /* Footer
    ——————————————— */
    #colophon p {
    line-height: 1.5;
    float: left;
    display: inline;
    }

    a.top {
    margin: 3px 0 0 0;
    font-weight: bold;
    display: block;
    }

    a.top:hover {
    text-decoration: none;
    }

    #footer-sidebar-1 {
    display: block;
    height: 250px;
    }

    #footer-sidebar-1 {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    }

    this is the footer.php:
    <div id=”footer-sidebar-1″>
    <?php
    if(is_active_sidebar(‘footer-sidebar-1’)){
    dynamic_sidebar(‘footer-sidebar-1’);
    }
    ?>

    And this is the part in function.php:
    function yoko_widgets_init() {
    register_sidebar( array (
    ‘name’ => __( ‘Sidebar 1’, ‘yoko’ ),
    ‘id’ => ‘sidebar-1’,
    ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => “</aside>”,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’,
    ) );

    register_sidebar( array (
    ‘name’ => __( ‘Sidebar 2’, ‘yoko’ ),
    ‘id’ => ‘sidebar-2’,
    ‘description’ => __( ‘An second sidebar area’, ‘yoko’ ),
    ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => “</aside>”,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’,
    ) );
    register_sidebar( array (
    ‘name’ => ‘footer-Sidebar-1’,
    ‘id’ => ‘footer-sidebar-1’,
    ‘description’ => ‘appears in the footer’,
    ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => “</aside>”,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’,
    ) );
    }

    should i ad something in sidebar.php?:
    <?php
    /**
    * @package WordPress
    * @subpackage Yoko
    */
    ?>

    <div id=”secondary” class=”widget-area” role=”complementary”>
    <?php if ( ! dynamic_sidebar( ‘sidebar-1’ ) ) : ?>

    <?php endif; // end sidebar 1 widget area ?>
    </div><!– #secondary .widget-area –>
    </div><!– end main –>

    <div id=”tertiary” class=”widget-area” role=”complementary”>
    <?php if ( ! dynamic_sidebar( ‘sidebar-2’ ) ) : ?>

    <?php endif; // end sidebar 2 widget area ?>
    </div><!– end tertiary .widget-area –>

Viewing 1 replies (of 1 total)
  • CrouchingBruin

    (@crouchingbruin)

    11 years, 5 months ago

    OK, first of all, don’t need to paste code unless someone asks for it. As long as you post a link to your site, we can find it ourselves.

    Second, you mentioned having made a lot of changes to the theme. You want to make sure that you are not changing the theme files directly. If the theme gets updated because of a bug fix, security patch, or feature enhancement, then your changes will be lost. If the theme has a custom CSS option, you can use that for any CSS changes. If it doesn’t, then you can use a CSS plugin like Jetpack or Custom CSS Manager to add your own CSS. If you have to make more extensive modifications, like changes to a .php file, then you should create a child theme and make changes to copies of the parent theme files in your child theme folder.

    You have a syntax error in the theme’s style.css file. It is missing a closing right brace for the media query section that starts like this:

    /* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {

    It’s preventing all of the other CSS rules after that from being recognized correctly. I’m thinking the closing right brace needs to go before this rule:

    body {
   background-color: #eadce5;
}

    OK, now to your footer problem. I assume that you want the footer widgets to line up next to each other along one row. The main problem is that the widgets are DIVs, meaning that they are block level elements. Block level elements will take up a whole row by themselves unless you set their display property in CSS. So add this CSS rule either through the theme’s custom CSS option (if it has one) or using a CSS plugin:

    #footer-sidebar-1 aside.widget {
   display: inline-block;
   width: 25%;
   float: left;
}

    You’ll probably also want to add a media query that changes the width to 100% on a mobile device.

Viewing 1 replies (of 1 total)

The topic ‘float widgets footer area doesn't work’ is closed to new replies.