Centering Slider

  • Greetings,

    I have Layerslider installed to run at the top of my website running the new Twenty Twelve theme; as a child theme. The slider won’t center, it keeps favoring the right side.

    I have it working perfect in the Twenty Eleven theme, but it’s appearing different in Twenty Twelve.

    I have it installed in the header.php in the child theme(third line is what I inserted for the slider:

    <body <?php body_class(); ?>>
    <div id=”page” class=”hfeed site”>
    <?= do_shortcode(‘[layerslider id=”1″]’); ?>

    The slider properties has an area to add style;
    “You can add your own style to the LayerSlider container if you want (for exampe margin top / bottom, etc). You can use any CSS properties.”

    I tried adding> margin-left:auto; margin-right:auto;

    No effect.

    Can someone tell me how to center this either through code in the header or through the slider itself?

    The website is https://www.wildcatit.com.

    Thanks,

    Mel

Viewing 7 replies - 1 through 7 (of 7 total)

  • It looks like the problem is that this div <div id="layerslider_1" has an inline width of 1000px which is wider than the enclosing element which has this CSS:

    .site {
    margin: 0 auto;
    max-width: 68.5714rem;
    overflow: hidden;
}

    So the slider is actually centered, but because it does not appear that way because it’s cut off by the overflow: hidden and the max-width in the above CSS.

    Making the slider div narrower should fix it.

    Thread Starter mhirtzel

    (@mhirtzel)

    Yes, I had it set to fill the entire header at 1000, which is how I had it set in Twenty-Eleven, and it centered fine.

    Is this because of the different theme, that they set that max? Is there a way around it? I’d like to have it fill up the top header to the page edge…

    I have it centered now, but I had to change the width to 950 to make it look center.

    Thanks for the info, much appreciated!

    Mel

    Different themes have different layouts, and you might be able to change it, but you’d need to know a fair bit of CSS as it’s not simple to change one piece of a puzzle — there would be other problems to deal with likely.

    I’m having the same problem as well.

    I’m using the Motion theme and was wondering if someone code savvy could take a brief moment to look at my site and give me some insight as to why the LayerSlider is favoring the right side instead of sitting in the middle?

    https://www.farawaynearby.com/nu

    I’m extremely novice in the coding department and it’s probably a piece of cake for a coder.

    I have a few studios looking at my site in a couple of days and I’d like to have it fixed by then so I don’t look like some hack.

    Your help would be greatly appreciated!

    -C.S.

    @c.S. — it’s best (and forum policy) to start your own thread rather than tacking on to someone else’s.

    That said, the following CSS code in your style.css file has all kinds of messy stuff — so try changing the whole section to this:

    #header #headerbanner {
    background: url("images/whitetrans.png") repeat scroll 0 0 transparent;
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 30px auto 10px;
    padding: 10px;
    width: 980px;
}

    WPyogi thanks so much for your quick response.

    And sorry for tacking on a pre-existing thread. In my forum experience, i’ve always had moderators smack my hand for starting a thread that already existed involving the same subject. But I’ll definitely keep that in mind in the future.

    LOL — yeah, it can go either way. But here, because questions are SO specific (i.e. theme, site, server, browser, etc.), it’s almost never the case that two situations are the same. And it really does not work well to help more than one person at a time — mass confusion and hard to even keep track of who is talking to who! No worries, just wanted you to know.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Centering Slider’ is closed to new replies.