How do I control the way my 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.

Resources

See these other help articles about cell groups:

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?

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.