Welcome Guest! Login? Checkout
This post was written 6 months ago and therefore may not be as accurate as more recent posts.

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

Comments are closed.