Toutes les collections
Newsletter
Template Editor
[Tutorial] Adding two items in double columns adapted to the mobile format
[Tutorial] Adding two items in double columns adapted to the mobile format

Aligning two items on a line and making them display correctly on mobile, it's possible!

Benjamin Carro avatar
Écrit par Benjamin Carro
Updated over a week ago

First of all, I invite you to read the documentation on "creating an article block".

Now let's see how to create and align two articles on the same line while ensuring responsive display on mobile phones.

Below is an example of what we want to avoid:

As you can see, on computer, the rendering is correct, we have two items per line. On the other hand, on mobile, the responsive does not display the items as expected.

This is not a bug, but the classic HTML behavior. In the block library of the template editor, we added what you need to avoid this kind of disappointment.


Below is an example of the rendering we want to achieve:

Add two articles on a responsive line on mobile

Please note:
This method is essential if you want to add two columns dedicated to articles. If, you do not wish to add the images of the articles then, you do not need to proceed as follows.

  1. Drag and drop the element named "2 columns of 2 rows" in the newsletter template.

2. Define the blocks according to the rendering you wish to have. In this example, we will use for the two blocks on line 1 of the images and for the two blocks on line 2 of the paragraphs.


3. Next, we will create an article with the image and the paragraph on the left. Then we will do the same on the blocks on the right.

4. Automatically, the preview is supplemented with content available in the feed.

5. We see that only the item descriptions are filled in, so we will insert the "Title" variable (because we want to retrieve the title and not the description of the item) from the "Item Variables" in the text editor.

6. In order to maintain perfect alignment of the articles, it is advisable to truncate the text you have inserted via variables. In this way, the number of characters will be identical on both sides and the horizontal alignment will be perfect.

To check the rendering of the newsletter after configuring your blocks, I invite you to send yourself a test newsletter.

Avez-vous trouvé la réponse à votre question ?