How do I center Meta Slider? On iPad?

So I tried making two sliders, as per the advice here, The respsonsive slider doesn’t quite look right on a mobile device and used the wp mobile detect plugin to change the slider according to the device that’s viewing it.

No luck!

Still looks like this on an iPad. Meta Slider justified to the left.

Any ideas on how to center it?

Hi there,

It looks like this is theme related – the container that the slider is in smaller in width than the main site container.

For example on one size down from desktop the main site container is 960px whilst the container that the slider is in is only 630px.

Is there another location where you can place the slider so it’s always in a full width container?

If not you could use a template include to display your slider instead of a shortcode, that way you can have more control over the placement.

Thanks,
Dave

Hi Dave,

I really appreciate you taking the time to respond to this.

That’s kind of what I was suspecting, although I’m not quite sure how to fix it. Currently the slider is just parked inside of a page. And that page is set as a static homepage.

However, I made a page template, based on the built-in “page.php”. It’s code looks like this:

<?php
/*
Template Name: My Custom Page
*/

<?php get_header(); ?>
<div id="content">
	<div class="container">

		<div id="single_cont">

			<div class="single_left">

				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<div class="single_inside_content">

						<?php the_content(); ?>

					</div><!--//single_inside_content-->

					<br /><br />

					<?php //comments_template(); ?>							

				<?php endwhile; else: ?>

					<h3>Sorry, no posts matched your criteria.</h3>
				<?php endif; ?>                    																

			</div><!--//single_left-->

			<div class="clear"></div>

		</div><!--//single_cont-->

	</div><!--//container-->
</div><!--//content-->
<?php get_footer(); ?>

If I wanted to insert the slider using template code, instead of the short code, how much of this other stuff should vanish? Is this even the proper way to go about it? Do I need some custom CSS too?

Again, I appreciate your time!
Cheers, Kevin

Hi Kevin,

If you add the template include (you can copy this from the Usage section at the bottom left of the slider settings page) and paste it here:

<div id=”content”>
<div class=”container”>

PASTE TEMPLATE INCLUDE HERE

<div id=”single_cont”>

Give that a try on a test page perhaps and let me know how you get on.

Thanks,
Dave

Hi Dave,

Good news, I tried the new code on a test page, had someone check it out it on an iPad and from the screenshots I was sent — it looks great. As you would expect.

I think we’re all set. I’ll test a little more thoroughly later but I think we’re good-to-go!

Thanks so much for your help with this. I truly appreciate it!

Best regards,
Kevin