Widget alignment

The widget alignment section can be found on the Widget placement page.

This section allows you to adjust the position of the date picker on the page by injecting a few CSS properties automatically.

It's meant to be used for small adjustments such as aligning the widget to the left, right or centre or adding a bit more spacing at the top, bottom or sides of the widget, etc. It won't modify the position of the date picker within the HTML code and might be ineffective depending on the theme.

If you can't quite achieve the result you're expecting don't hesitate to contact our support team. They will be able to help you with that.

Automatic alignment

The whole Widget alignment section is completely optional, the date picker will manage to position itself automatically and that might be good enough depending on your theme. In most cases, it won't require adjustment. If you're happy with the positioning of the date picker, you don't have to modify this section. You can also only modify the properties you wish to adjust and leave the other properties as "Automatic".

Different properties for large or small screens

It's very common to have different alignment or spacing rules between desktop and mobile. For example, the widget might be aligned on the right of the desktop but centred on mobile. That's why we offer two sections: one for "large" screens and one for "small" screens.

The definition of small screens depends on the width of the screen and may vary from one theme to another that's why we're providing a way to modify and adjust it with the field: "Applies to screens smaller than". The default value is 750 pixels. You can determine this value by resizing your screen until it switches to "mobile mode".

Change the widget alignment

This determines the position of the date picker within his parent element. If the surrounding element is larger than the widget you can choose to align it:

• on the left side of the parent element;
• on the right side of the parent element;
• in the centre of the parent element;
• or take up the same width as the parent element.

It might not always do what you expect depending on the placement of the widget on the page. If that's the case you might need a different manual placement.

Change the widget's margin

The margin is the space surrounding the widget.

For example, you can add more or less space between what's above the widget and what's below by modifying the top or bottom margin.

Negative pixel values are accepted to make the date picker even closer. This can sometimes be a required workaround.