Device Styles

For granular control over how content is displayed across different device types, 'Device Styles' can be easily incorporated.

What is a 'Device Style'?

When designing content, text components such as headlines and subtitles can sometimes appear either too small on 'Desktop', or too large on 'Mobile' and it may not be possible to get the perfect result by using a single style which suits every device..

'Device Styles' address this problem by creating additional styles which override specific properties of an article when viewed on a particular device. For example, it is possible to create a style specifically for desktop devices which increases the size of the headline and subtitle components by 15%.

Canvasflow supports multiple device styles per article, giving you complete control over how each style renders in any given scenario.

Creating a 'Device Style'

Create a New Style via ‘Style Manager’.
Enter a name for the style. For easy reference, it's recommended to include the name of the type of device you are creating the style for, e.g. “Modern-Desktop”.
Select the 'Scope' of the style ('Brand' or 'Global')
Choose the source type, in most cases this should be set to ‘New’.
Select Device from the ‘Type’ menu.
Create Create. The 'Device Style' will be created and appear at the bottom of 'Style Manager'.

Editing a Device Style

'Device Styles' can be customised in exactly the same way as an 'Article Style', but remember that adjustments only apply when viewed on an appropriate device.

For example, if you want to reduce the paragraph font size just for mobile devices, select the paragraph text component and enter your preferred font size. Then save and exit the style.

Applying / Associating a Device Style

Once a device style has been created and customised to your requirements, it must be associated to one or more article styles for it to take effect.

Open ‘Style Manager’.
Select the ‘Article Style’ you want to associate with a ‘Device style’ and click Edit Details.
At the bottom of the model window you will see two options related to 'Device Styles':
1. Tablet Style.
2. Desktop Style.
Apply the appropriate 'Device Style(s)'
Click Update to apply the change.
Publish the article/ issue for the new style changes to take effect.

Disconnecting a 'Device Style'

Device styles can be disconnected from an ‘Article Style’ at any time.

To disconnect a Device Style:

Open ‘Style Manager’.
Select the ‘Article Style’ you want to disconnect the ‘Device Style’ from and click Edit Details.
From the appropriate ‘Device Style’ menu (Tablet or Desktop) set the style to ‘None’ for the 'Device Style' you wish to disconnect.
Click Update to apply the change.
Publish the article/issue for the change to take effect.

Deleting a Device Style

'Device Styles' can be deleted at any time, as long as they've been disconnected from any 'Article Styles' which may be using them.

To delete a 'Device Style':

Open 'Style Manager'.
Select the Edit icon next to the 'Device Style' you want to delete.
Select the Delete option.