{"id":15259,"date":"2019-11-05T21:31:09","date_gmt":"2019-11-05T21:31:09","guid":{"rendered":"http:\/\/www.glitnir.com\/?page_id=15259"},"modified":"2019-11-08T14:59:58","modified_gmt":"2019-11-08T14:59:58","slug":"columns-display-mobile","status":"publish","type":"page","link":"https:\/\/www.glitnir.com\/index.php\/using-the-editor\/columns-display-mobile\/","title":{"rendered":"How columns display on mobile devices: using the &#8220;Do not stack on mobile&#8221; setting"},"content":{"rendered":"<div id=\"pl-15259\"  class=\"panel-layout\" ><div id=\"pg-15259-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-15259-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-15259-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p>Often content in an email is organized in multiple columns. When viewed on a mobile device, those columns can become quite narrow and lead to a sub-optimal reading experience. In order to guarantee a better experience while reading emails on mobile devices, the editor generates HTML code that makes columns stack vertically. This way content is reorganized in a way that makes zooming unnecessary and is easy to scroll with a finger.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Desktop vs mobile preview<\/strong><\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005730311\/desktopVSmobile.png\" alt=\"desktopVSmobile.png\" width=\"600\" height=\"261\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Vertical stacking is supported by the most popular mobile email clients. In some cases, the desktop version will be displayed.<\/p>\n<h3><\/h3>\n<h3>One size doesn't fit all<\/h3>\n<p>Although it normally helps, there are cases in which vertical stacking of columns may not lead to an optimal result.<\/p>\n<p>A common scenario is using a row to display a navigation bar with text links or icons. In that scenario, as shown below, a\u00a0vertical layout could create excessive empty space, hiding important elements of the message or giving too much visibility at the top of the email to content that is not supposed to be that prominent.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>A navigation bar: vertical stacking vs. horizontal display<\/strong><\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005730291\/Nav_comparison.jpg\" alt=\"Nav_comparison.jpg\" width=\"601\" height=\"506\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>An example with illustrations<\/strong><\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005689012\/Nav_comparison_illust.jpg\" alt=\"Nav_comparison_illust.jpg\" width=\"600\" height=\"506\" \/><\/p>\n<h3><\/h3>\n<h3>Changing the default behavior<\/h3>\n<p>With the introduction of the\u00a0<strong>Do not stack on mobile<\/strong> row setting,\u00a0users of the editor can now decide when to override the default behavior and prevent columns from stacking vertically on mobile devices.<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005688992\/Do-not-stuck-on-mobile.png\" alt=\"Do-not-stuck-on-mobile.png\" width=\"602\" height=\"348\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The option is available in the right pane as a row property, off by default.<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/support.beefree.io\/hc\/article_attachments\/360005730271\/dontstack.png\" alt=\"dontstack.png\" width=\"599\" height=\"115\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>\"Do not stack\" and email design best practices<\/h3>\n<p>Email design best practices suggest a careful use of this display setting, as keeping a user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.<\/p>\n<p>Have fun with this new feature! \ud83d\ude42<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Often content in an email is organized in multiple columns. When viewed on a mobile device, those columns can become quite narrow and lead to a sub-optimal reading experience. In order to guarantee a better experience while reading emails on mobile devices, the editor generates HTML code that makes columns stack vertically. This way content [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15226,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15259"}],"collection":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/comments?post=15259"}],"version-history":[{"count":4,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15259\/revisions"}],"predecessor-version":[{"id":15403,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15259\/revisions\/15403"}],"up":[{"embeddable":true,"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/pages\/15226"}],"wp:attachment":[{"href":"https:\/\/www.glitnir.com\/index.php\/wp-json\/wp\/v2\/media?parent=15259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}