General layout & cell group rendering

Why is my email rendering too wide despite a width being set?

You may notice the width of the actual text of your email is wider than your images. You may also notice the images themselves are not centered.   

If you notice that same email renders correctly as a template but not as a campaign, this could be due to a setting in the footer. To check this, navigate to the Footer section by clicking on Settings, Account Management, Footers, then Edit that specific footers. Un-check "Inherit Styling from Email" and click Save. 

You will need to go back into the campaign itself and re-save so the new footer takes effect. 

How do I control the way cell groups stack?

When it comes to mobile design, cell groups may render differently than how they were built in the drag-and-drop editor. If you choose to use Cell Groups in your design there are two general display settings: responsive and non-responsive.

• Responsive: Will stack your content in left-to-right order when displayed on a mobile device.
• Non-responsive: Will shrink your content to fit the screen when displaying on a mobile device.

Example

Beyond these general display settings for cell groups, let's dive in a bit deeper with a specific example of designing for mobile in mind when using columns, rows, or cell groups.

The scenario: I need to create a layout seen in the image below where each column contains 3 rows that includes an image, the headline, and then the story text. I initially build this by adding the "full" layout row and placing a 3x3 cell group into it. 

Using this type of cell-group with the responsive setting selected (mentioned above) will stack for mobile like this: 

So, how do I build the structure in the campaign or email template so that it stacks image, headline, then story as intended? Instead of using the "full" layout row with a 3x3 cell group, use the "thirds" layout row. Assign each of the 3 cells as a 1X3 cell group.

Related Articles

How do I create custom columns in a cell group?

How do I make my cell group stack on mobile?

How do I customize my cell group?

Mobile rendering notes

Mobile devices render emails based on multiple levels of rules including device, email client or browser, personal viewing settings, and more. Because of this, 100% rendering perfection is not attainable. We recommend you design for mobile in a way that is friendly to most environments, test as much as possible, and utilize our email rendering integration.

How do I make a cell group stack on mobile devices?

When utilizing Cell Groups in your design, you can choose to make the Cell Group responsive.  When a Cell Group is specified to be responsive, it means that it will adapt to the receiving reading environment. In most cases, it means the cells will stack instead of shrink to fit.  See example below:



You have the ability to choose if your Cell Group should be responsive or non-responsive. Follow the steps below:

1. Open your email template or campaign in the drag-and-drop editor.
2. Insert row and assign as Cell Group.
3. Click on Cell Group to edit.
4. Locate and click "Change Cell Group Layout" (right).
5. Choose dimensions for Cell Group and click to select desired grouping from results.
6. Click "Customize" button.
7. Click "Responsive" button.
8. Click "Ok".

Notes

Though we provide the tools in our application to display a Cell Group as responsive, it does not guarantee all email clients will honor it.