Tour Editor Part 3: How to Position and Size Your Tour Cards

Card Size

Each size option offers a choice between a sliding scale and a manually entered pixel value. As the width is adjusted using the sliding scale, you can see the card update in real-time. The height settings allow you to specify both a minimum and maximum height for the card, using either pixel values or percentages.

Card Position

On the Card position tab, there are a few more options concerning where the tour card is located. You can change the card's automatic position to your preferred setting.

With smaller targets, the difference may not be very noticeable. However, when switching to a larger target, it becomes much more apparent.

Detached offers nine areas on the screen that are completely independent of the selected target. This can be particularly useful in scenarios where an element is awkwardly positioned or conflicts visually with something else on the screen.

The Z-index determines the depth of the card, so it's important to ensure that it is set higher than other elements to ensure your card doesn't get positioned behind other items on the webpage.

Scroll margin refers to the space between the bottom of the target element and the bottom of the screen, measured in pixels. Increasing the scroll margin allows the target element to enter the view with a greater distance from the bottom of the screen, creating a more visually balanced presentation.