WordPress.org

Support

Support » Themes and Templates » [Resolved] Centering responsive_slider in header

[Resolved] Centering responsive_slider in header

  • I am trying to center responsive_slider which I have placed in header of Twenty thirteen theme.

    ‘<div id=”head” class=”img”>
    <?php echo do_shortcode( ‘[responsive_slider]’ ); ?>
    <div>

    I have added
    ‘#img .head
    {
    border: 0;display: block;
    margin-left: auto;
    margin-right: auto;
    }

    however the slider is still left justified.
    I appoligize ahead of time if this has been covered, I have not found a solution.

Viewing 5 replies - 1 through 5 (of 5 total)
  • First of all there’s a problem with your CSS – head is an id and img is a class but your CSS is stating that img is an id and head is a class.

    Basically the # denotes an id and the . denotes a class so you’ll need to switch those two around – test and see if it works.

    Personally I would do something like…

    .slider {
        margin: 0 auto;
        border: 0;
        display: block;
    }

    And the div would be like…

    <div class="slider">
        <?php echo do_shortcode( '[responsive_slider]' ); ?>
    </div>

    Sometimes you’ll find that margin: 0 auto; doesn’t work so try the left and right margin as auto or try the text-align: center; property and see which works best.

    oh sorry
    thanks for that quick reply, hmmmm

    Ok with the corrected CSS

    ‘.slider {
    margin: 0 auto;
    border: 0;
    display: block;
    }

    changed my div to

    ‘<div class=”slider”>
    <?php echo do_shortcode( ‘[responsive_slider]’ ); ?>
    </div>’

    and still have alignment left
    I also went with


    .slider {
    margin: auto;
    border: auto;
    }

    with no success

    paulwpxp

    @paulwp

    Font hero

    In addition to Zulfikar Nore, the top <header> of TwentyThirteen is 100% width, so center align with margin auto won’t work, because slider expands to full width of its container.

    Also, that div might not be necessary. See if this centers the slider, if not use that div and change the class.

    .responsive-slider.flexslider {
    	max-width: 1080px;
    	padding: 0 20px;
    	margin: 0 auto 20px; /* adjust top, bottom as needed */
    }

    On a sidenote, all the changes should be done using Child Theme.
    http://codex.wordpress.org/Child_Themes

    That worked great Paul!
    you guys seriously rock.
    I did have to do a little more adjust on the padding.
    but all in all

    I will try a Child theme next time….

    Thanks happy camper here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Centering responsive_slider in header’ is closed to new replies.