Show clocks on same row

Hi Stine, it depends on where these clocks are (post content, widget or theme template file) and your theme’s stylesheet.

The shortcode for example has the align parameter which can be used to align/float multiple clocks to the left or right so that they show in a row, and if you have (your first row) three clocks you could each give them a different align value:

[coolclock align=left subtext="left"]

[coolclock align=right subtext="right"]

[coolclock align=center subtext="center"]

Then the case of the second row would be more complicated when you want to align them to the middle while still being side by side. This (added in the Text tab!) might work for you:

<div style="margin:0 auto;clear:both;width:500px;max-width:100%">
[coolclock align=left subtext="left"]

[coolclock align=right subtext="right"]
</div>

However, these examples will probably align weirdly on smaller screens that do not fit three clocks side by side.

So get all clocks the same size, while keeping it all adaptive to every device/screen size, aligning them to the center while still showing them in two rows… you’ll have to either add a much more complicated div structure and CSS style rules (look into the CSS3 flexbox rules) or, maybe easier, you could try using another plugin for the creation of adaptive columns on your page.

Either one of the dedicated plugins for row/columns (they use shortcodes too) or you can use one of the new (and becoming more and more popular) page builder plugins that allow you to add rows, columns and widgets into post and page content via drag-drop interface.

The advantage of a page builder is that you have the widget to your disposal instead of having to work with shortcodes. Downside might be that your site gets heavier than it needs to be and most of the page builders kind of “lock you in” making it difficult to switch back to the normal WordPress editor.

Thank you for your answer.
I have now tried making the clocks work for a while but with no luck. I am inserting them into a page.

I have tried using Visual Composer, making 3 columns and inserting the clocks code as text in each column, but this made them align weirdly – also the text that was supposed to be underneath, was not.

I have also tried using the “align=center”(/left/right) as you suggest for the top row, but they are still in a vertikal row, not a horizontal one.
I am starting to believe that it might be a lost cause using this plugin?

Best regards

If it is too hard getting them in two rows, all clocks in a single row would be fine to. The most important thing is to get the clocks to stay in a horizontal row ??

It sounds like there are some conflicting style rules or something, displacing texts and other stuff… And maybe so style rules that are normally in any theme (for the classes alignleft, aligncenter and alignright) are missing?

If you can share a link, I can take a closer look ??

https://nordic-it.com/newsite/index.php/about/
Here is the link for the page. It is on the second slide.

Ah, a Themeforest theme… That complicates things usually, but also might offer an easy ways out. I suppose there is a theme option that allows you to add custom style rules? Try adding these rules:

.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

Then you should have the three positions — align=left, align=right and align=center — available for your clocks.

• This reply was modified 8 years, 1 month ago by Rolf Allard van Hagen.

Next question: I suppose the theme has “page builder” functionality built in? If so, could you create a temporary section on the page, using the page builder with rows/columns and widgets? I might be able to see where/why this goes wrong…

Hi again.

I’ve implemented the code in the CSS styling sheet, and i believe this solved the problem. I have made a new section that is divided into 3 columns (using Visual Composer) – is that what you meant me to do? Otherwise please just inform me and i will do it ??

OK about the first three shortcodes: place the one with align=right in the middle (so align=center as last one) to make them all appear in one row.

About the ones in the Visual Editor columns:
1. use align=center for all of the shortcodes used here
2. try to add a new row below the first one but this time give it two columns, then move the Saint Petersburg and Shanghai clocks to that second row, each in their own column…

• This reply was modified 8 years, 1 month ago by Rolf Allard van Hagen.