Mobile behavior for containers: Define line breaks in the mobile view

The most important thing you need to do regarding mobile behavior is to define wraps on mobile.

What does "wrap on mobile" mean? If you're not sure what wrap in mobile view means, you can find an explanation here.

Step by step

  1. Open your container in the "Mobile behavior" workflow step.

  2. Select all cells that should be moved to the next line in the mobile view.

    To do this, click on the vertical border where you want to wrap on mobile.

    Also click once to select the subsequent cells of the same column.

    Click the icon to also wrap the last column.

    Only selected cells are wrapped: Make sure that all cells you want to wrap are highlighted in turquoise.

  3. Click:

    • "Wrap right element down" to display all right, turquoise-colored elements in a new line on the mobile view

    • "Wrap left element down" to display all left elements marked in gray in a new line on the mobile view

    Depending on how your container is set up, it may make more sense to wrap the left or right element down in the mobile view. You can see the difference in the output:

    Wrap right element down

    Wrap left element down

    The element that is visible on the right in the desktop view is displayed at the bottom in the mobile view.

    The element that is visible on the left in the desktop view is displayed at the bottom in the mobile view.

  4. Check the "Mobile preview" panel to see if your line breaks appear as they should.

    Before After

    No wrapping = desktop view: All cell groups for which you did not make any settings will remain as they appear in the desktop view and are scaled to fit small screens.

  5. Did you accidentally set a line break in the wrong place?

    Then click "Delete group" to undo the changes.

    If the grouping was already correct, but you want to correct the order, you can also just click on "Wrap left element down" (or "Wrap right element down").

    Do you want to start over?

    It takes a little practice until you get a hang of how wrapping texts in the mobile view works. Simply click "Reset all line breaks" and start over again if you are not happy with the results the first time.

  6. Repeat the procedure for all columns that are to wrap on mobile.

  • You have defined the line breaks in the mobile view for your container.

Mobile preview with real images: Do you want to see how your container will wrap in the mobile view when using real images?

Then add your container to a mailing and check the mobile view in the mailing preview.

Next steps