> For the complete documentation index, see [llms.txt](https://docs.theconfigteam.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theconfigteam.com/prebilt-ewm/configuration-guide/customising-the-screen-layout.md).

# Customising the screen layout

There are a variety of options available for screen layout customisation, based on the necessary changes. Screen configuration makes this process simpler by separating the relevant options based on the type of change required.

The following sections will outline the options available to create an engaging end-user EWM mobile experience.

## Useful tips for defining a screen layout

When defining the Line Group, Visual Length, and Line Position, consider that the layout functions in a grid format, where columns are divisible by 12.

Decide on the number of columns to be displayed initially and use this as a basis to build the screen.

{% hint style="info" %}
**Example**

Three fields on the screen with the line group number 1 are defined with line position 1, 2 and 3 respectively.

Defining visual length as 1 for each field will split the screen evenly for each field.
{% endhint %}

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-bbf9bf0787e81ead709abaf6b754e6f9e9903ffc%2FEWM-Spreading%20fields%20evenly.png?alt=media" alt=""><figcaption><p>Spreading fields evenly</p></figcaption></figure>

These settings are displayed in the front end as below:

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-c5a9883f09f7976cd304e546f42665a76635984e%2FEWM-Spreading%20fields%20evenly%2001.png?alt=media" alt=""><figcaption><p>Spreading fields evenly - display</p></figcaption></figure>

{% hint style="info" %}
**Example**

Defining the visual length for each field as 1, 2, 3 respectively.
{% endhint %}

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-d2f3dcf5eb227d91c4a037f9d48727bc10044452%2FEWM-Configuring%20a%20different%20field%20length.png?alt=media" alt=""><figcaption><p>Configuring a different field length</p></figcaption></figure>

These settings are displayed in the front end as below:

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-35be4a85a59efd27240b0f5fabc8117788dfe481%2FEWM-Vis%20Length%20Adjusted.png?alt=media" alt=""><figcaption><p>Vis Length Adjusted</p></figcaption></figure>
