Welcome Guest! Login? Checkout

One of the most common questions I get asked with WP Flipclock is how to centre WP flipclock. By default the flip clock appears on the left hand side of the screen, largely due to it is easier to put it there, but the plugin does at least try to centre it a bit.

The problem is that there are millions of themes out there and the vast majority of plugins work differently with each theme, so we cannot really support your theme. However, what we can do is try to explain what the plugin does, and how you could make the changes that will work.

Understanding the .flip-clock-wrapper Element

When you install WP Flipclock, it will link two CSS files – one of which is the flipclock CSS styling included in the Flipclock.js library, the second handles some extra CSS to make it compatible with WordPress and gives you more control. A div with a class .flip-clock-wrapper is wrapped around the flipclock, and it has the following default CSS.

Centrally Aligning the Flipclock in the theme

To centrally align the flipclock, in your WordPress theme, add the following two elements into your theme:-

  • margin: 0px auto. This will put your flipclock in the centre.
  • max-width: x%. This will be a percentage value based on the width of your theme. This could be up for changing. Why do it a percentage width? Well browsers may make your flipclock larger and smaller dependant on text size. This will allow the flipclock to increase or decrease in size gracefully.Alternatively, the flipclock max width is 460px, so you may want to set it to that instead.

Example Code

So if you want your flipclock to display in the centre of your main div, you would put something like this in your theme’s functions.php.

You may want to use developer tools in Google to make sure it looks right before adding to your theme.

Responsiveness

You need to make sure that it works okay on responsive layouts, as on small widths you may want to increase the max width to 100%.

Still Having Problems?

If you are still having problems, if you sign up for Premium Support I would be happy to take a look at your site.

 
 
 

Comments

Polite Disclaimer: I am welcome, open and willing for corrections to be shared in the comments (with corrections being added to posts and credited), and the comments field should be used to promote discussion and make this post better. I do not know everything and if anybody finds a better way to do something, then by all means please share it below.

However, I'm unable to offer support to posts. The reason being is that WordPress has tens of thousands of plugins and millions of themes. As such, finding out exactly why code doesn't work with your setup is a long process. If you wish for me to look at your code, please use the priority support area.

Comments asking support will be left on the site, but there is no guarantee of answer.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
*