Form Factors & Orientation

As mentioned, any JourneyApps application will run on a smartphone or tablet form factor. The layout may however vary between the different form factors and portrait/landscape orientations, and specialized tablet components such as sidebars, columns and "Proceed" buttons will work differently on a smartphone.

The diagram below shows how different form factors will be handled by JourneyApps if sidebars and columns are used. The blue blocks represent sidebars and the pink blocks columns. Note that columns are stacked on top of each other if there isn't enough space to show them next to each other.

Adjusting Embedded HTML for Dynamic Width

If you link your smartphone as a test device to your Snag List app again, you may notice that the content of the HTML file that we embedded doesn't fit into the width of the screen:

To make our embedded HTML adjust itself to the dimensions of the device, we can add a CSS rule specifying max-width: 100% as shown below:

Refresh your mobile app — it should now look like the following: