Stripo provides flexibility for creating a mobile version of your email. There is a set of tools that allow you customizing the appearance of text, buttons and other elements on smartphones. This is especially true for creating a more attractive and accessible layout of the email content.

Let us look at common use cases of creating the mobile design, and see what techniques can be applied to make the mobile version more attractive and accessible.

In Stripo, we can enhance the mobile view by changing the position of containers or hiding content.

We can often see a design with two containers when there is an image and a text block beside it in one row. It can be an excerpt from a blog or a news report.

If the text is too long, it will not have enough width on the mobile view and will stretch in height:

For such cases, you should enable Responsiveness for the structure. The text will be placed below the image, where there will be more space for it:

Result:

But what if the text block is placed to the left of the image? In the responsive view, the right container is placed below the left one, causing the text description to appear above the image.

For this purpose, we have the "Containers Inversion on mobile" control, which changes the order of containers in a structure and the result is:

Stripo editor allows you to hide some content for either the desktop or the mobile view. This is especially useful if we have several containers on one row and we don't want them all stacked vertically one after the other.

For example, you might have 4 product cards in a row. On the responsive view, each card will take its own row:

But how to make it so that two cards are in each row?

First, we ought to turn off responsiveness for the structure. Then we hide the last two containers with cards, using the control "Hide element on Mobile".

We will create a separate non-responsive structure for these two cards and then hide it for the desktop view. It should look like this:

As a result, we will get 4 cards in one row on the desktop, while on the mobile view, we will have two rows of two cards each:

Hiding containers can be useful if you want to leave some areas empty.

To leave any space unfilled, you can add the block Spacer and enable the dynamic option.

For example, I can add a structure with three containers, and then add the dynamic spacer to the left container:

This empty area will be visible on the mobile view. Hence, I should hide the whole container with the spacer by using the control Hide element:

Result:

When a row of containers has images and text of different sizes, it could happen that the containers will have different widths on mobile if the Responsiveness for the structure is disabled:

This issue is explained by the way browsers and mobile clients adapt content to mobile screens. They use an algorithm by which the width of a mobile screen is allocated among the content, to make sure each of the content cell has enough space to fit the screen. This leads to the result when images have different sizes on mobile, especially when the text below them is different too.

To make containers look the same on mobile, you can just press on equalize button and we add special class to the code to make them equal (50% each) and as the result they have the same width now:

In the same way, we will equalize containers depending on how many containers were added to the layout.

In case you would like to set up your own width, you can add the custom class to the containers cells that have the class esdev-mso-td, as shown in the screenshots and set up the suitable width:

You can add also the unique custom class to each container separately or set up the suitable width in px in the UI settings.

Images make emails more vibrant and eye-catching. To make images look good on the mobile view, you can adjust their appearance using the Stripo tools.

In this article, you will find the detailed description of how to work with images of both small and big sizes as well as background images please.

Sometimes we have to change the relative position of elements on the mobile view. For this purpose, we can add individual paddings and alignment just on mobile.

If you have a structure with several containers and need some gap between them on mobile, you can set up it in the Containers Gap on Mobile:

Additionally you can set up the suitable paddings (Internal padding adds some space around containers and blocks), blue background on the screenshot. And also you can set up margins - additional space around the structure (white background on the screenshot).

Also you can set up the suitable paddings for the container:

If a text contains line breaking, then the distribution of words among text lines may not look good on the mobile view. In my example, the word arrivals stays on a separate line:

There are several ways to fix it.

I can decrease the mobile font-size of this text block under "Styles" of the text block to locate it in 1 line:

And also we can check the text alignment and left-right paddings since they will also influence the text position:

Or we can highlight our text line and use the tool Disable Line Wrap to prevent words from being wrapped on a new line:

Thank you for taking the time to read our articles. We hope you will find this information helpful.

​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.