How can we help you?
In the modern world of technology, people use many different devices, like smartphones, tablets, laptops, and desktops, to access websites. To make sure everyone has a smooth and easy experience, customize your website to fit different screen sizes and layouts. This will help your site reach more users and work well on any device.
Also, keep your branding, user interface, and design consistent across all devices. This strengthens your brand’s identity while ensuring your website remains user-friendly and functional.
Titan Web lets you add different device layouts so that your project is presented optimally for a customer’s device.
Learn more about the different device layout options.
It is not necessary to change any of the layout options as all Titan projects use Responsive AI by default. The project will automatically change to fit the end-user’s device size. When you preview your project on different devices, Titan automatically adjusts the layout to fit the screen dimensions.
It is suggested that you create the entire project and only change the device layouts right at the end.
Once you select a device layout option, it becomes disconnected from the desktop layout and creates a standalone layout. Changes made to a standalone layout will not affect the desktop layout and vice versa. You will have to manually make changes on a standalone layout if you change anything that should affect the whole project.
You must edit the site link to preview how the content will display on different devices.
The preview screen will auto-adjust when you resize it by dragging the screen smaller or bigger.
When you change the layout to a tablet or mobile device in the builder, Titan automatically changes your project to be displayed in a single column.
The Responsive AI toggle switch is on by default. Titan doesn’t change the structure of your project, it just makes it smaller to match the device.
When you make a selection, that option refers to the previously defined device layout.
For instance, when setting the Tablet (S), the Titan system will refer to the Desktop device layout to display the small tablet layout. However, when setting the Mobile (S), the system will refer to the Mobile (L) device layout to display the small mobile layout.
This message is shown for the following device layout options:
If you choose Auto Layout, we will automatically create the responsive layout for this device. This includes aligning elements within the auto fit container. Choosing Auto Layout will limit your ability to control the design of your form.
It is suggested that you use the Auto Layout as Titan adds an autofit container to make sure that the information is displayed from the top down in a contained manner.
Select the Manual Layout option for maximum flexibility. Manual layout uses the responsive AI and you can make changes as you require.
If you make changes to the desktop layout and you want those changes to be applied to all the other devices as well, use the Refresh Layouts option.
The refresh layouts option automatically resets all active device layouts to fit the screen (according to the desktop changes).
All custom changes on each device layout will be deleted.
You can delete the configuration for different devices.
All Titan projects use Responsive AI by default. However, you can make manual changes.
Refer to the two screens below. The top screen shows the canvas layout when the Device Fluid Width toggle switch is off. The bottom screen shows the Device Fluid Width toggle switch on.
All the elements are positioned to fit the width of the screen.
Auto-scaling is more flexible and can make small adjustments to elements based on screen size changes, while fluid width mainly focuses on repositioning elements based on the screen width.
Auto-scaling is commonly used when working with high-resolution devices such as 2K and 4K screens.
For best practices on how to build your page, refer to Web Project Structure Changes.
