Page Modal – Dynamic Size

Business Background

You can set the dynamic size for a page modal using Titan Web.

Titan Solution

Use Titan Web to set the dynamic size of a page modal so that it displays well on a laptop, tablet, as well as large and small mobile devices. Smaller screens will require different configurations to achieve the correct responsiveness.

How to Guide

  1. Click the icon to open the list of elements.
  2. Add an element to the canvas, for instance, Text.
  3. Click the Text element Gear icon and select the Interactivity option.
  4. Click the Configure On Click Actions icon. The Actions Flow screen opens.
  5. Click the + icon:
Configure On Click Actions icon
Configure On Click Actions icon
  1. On the Add Node screen, select the Redirect/ Go to Page option.
Add Node screen
Add Node screen
  1. Select the Internal option and use the drop-down list to select the Redirect URL.
  2. Use the drop-down list to select the Modal option.
Internal
Internal
  1. Select the Dynamic checkbox. The screen expands to show the width and height fields for the following devices:
    • Laptop
    • Tablet
    • Mobile (large)
    • Mobile (small)
  2. Type the width and height of the devices in the corresponding fields. Set the different modal sizes for each of the above devices.
Dynamic sizes
Dynamic sizes
  1. If necessary, add a tag in the Tag field, and select the Insert button.

The Redirect/Go to Page node is added.

Redirect/Go to Page node
Redirect/Go to Page node

The display will resize appropriately when you preview the redirected screen on different-sized devices. 

Hidden Title

Need more help?

Titan logo
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.