WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] Centering responsive_slider in header (6 posts)

  1. idahoster
    Member
    Posted 11 months ago #

    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.

  2. Zulfikar Nore
    Member
    Posted 11 months ago #

    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.

  3. idahoster
    Member
    Posted 11 months ago #

    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

  4. paulwpxp
    Font hero
    Posted 11 months ago #

    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

  5. idahoster
    Member
    Posted 11 months ago #

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

  6. idahoster
    Member
    Posted 11 months ago #

    Thanks happy camper here.

Reply

You must log in to post.

About this Theme

About this Topic