{"id":3405,"date":"2016-04-30T08:56:48","date_gmt":"2016-04-30T08:56:48","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=3405"},"modified":"2020-10-21T15:54:03","modified_gmt":"2020-10-21T10:24:03","slug":"adjust-3-columns-in-email-for-on-the-go-users","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/","title":{"rendered":"How to Adjust 3 Columns in Email for On-The-Go Users"},"content":{"rendered":"

Email designers and coders put their heart and soul to build and create a beautiful email design<\/a> that looks wonderful in the inboxes and appeal to the subscribers too. However, in this process of wooing subscribers email designers and coders face several technical and non-technical issues. One of the technical issues faced by the email coders is adjusting 3 columns<\/em> in mobile.<\/p>\n

The Problem\u2026.<\/h2>\n

In this article, Uplers will show you a simple way of overcoming the hassle of arranging 3 column designs on mobile. We are aware that columns are created in the desktop design so the height of the email can be reduced. But the same has negative effect for the mobile users. On mobile, all the columns stack one after another, and the 3 columns become bunch of big blocks arranged one after another increasing the height of the email. An example of that can be seen below:<\/p>\n

\"3<\/p>\n

Whenever there are 3 columns in an email, and are as coded using tables, stacking them one below another is the option. Normally three columns (3×1) are stacked into one column (1×3). This increases the length of your email in mobile leading to more scroll for viewing all three images too.<\/p>\n

If the numbers of products are more like 6 products or 9 products stacking one product per column, in mobile it is too lengthy and not recommendable. Alternative is that we create 2×3 block in mobile that would still keep all text and images readable. But then creating 2×3 blocks usually lead to coding the 3rd block twice, one for mobile and one for desktop.<\/p>\n

Thereby dual coding has to be applied, considering tables coding in line would lead to create problems in some of the older email clients like Lotus, Outlook 2003 etc.<\/p>\n

To remove this limitation<\/em> we have come up with the solution of arranging the 3 columns layout for desktop to 2 columns layout for mobile with 100% compatibility. Though this will not save the length of the email, it will eliminate the reasons of hiding the content on mobile.<\/p>\n

Solution:<\/h2>\n

To accomplish this, we must code all the columns within one single TD with left alignment.<\/p>\n

\"table<\/p>\n

All the columns must be coded as TABLE with left align of each other, with the required width. Then, all the columns must be set to 50% width for smaller devices within the media-queries. This will allow the two tables with 50% width to automatically set after each other.<\/p>\n

\"2<\/p>\n

Coding the columns side-by-side will however create an alignment issue with Outlook 2007, 10, 13 and Lotus. You are here required to have the hack for these two. Creating the layout structure of this way would save up many scrolls on smaller screens.<\/p>\n

By applying this solution, three columns in email for mobile users can be achieved without any hassle. However, many email marketers struggle while applying this optimum solution. This is when Uplers can come to your rescue. Contact us<\/a> to gain more insights about it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Email designers and coders put their heart and soul to build and create a beautiful email design that looks wonderful in the inboxes and appeal to the subscribers too. However, in this process of wooing subscribers email designers and coders face several technical and non-technical issues. One of the technical issues faced by the email […]<\/p>\n","protected":false},"author":1,"featured_media":3408,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,381,10],"tags":[624,626,625,346,342,289],"class_list":["post-3405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-delivery","category-email-design","category-email-marketing","tag-3-column-email-template","tag-3-column-emails","tag-3-column-layout-in-emails","tag-email-marketing","tag-email-soultion","tag-emailmarketing"],"yoast_head":"\nHow to Adjust 3 Columns in Email Template for On-The-Go Users<\/title>\n<meta name=\"description\" content=\"In modern world of large screens,by applying the optimum solution, one can overcome the struggle of aligning 3 column email template for mobile users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Adjust 3 Columns in Email Template for On-The-Go Users\" \/>\n<meta property=\"og:description\" content=\"In modern world of large screens,by applying the optimum solution, one can overcome the struggle of aligning 3 column email template for mobile users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-30T08:56:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-21T10:24:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/\",\"name\":\"How to Adjust 3 Columns in Email Template for On-The-Go Users\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"In modern world of large screens,by applying the optimum solution, one can overcome the struggle of aligning 3 column email template for mobile users.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"3 Column Layout email template\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Adjust 3 Columns in Email for On-The-Go Users\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Adjust 3 Columns in Email Template for On-The-Go Users","description":"In modern world of large screens,by applying the optimum solution, one can overcome the struggle of aligning 3 column email template for mobile users.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/","og_locale":"en_US","og_type":"article","og_title":"How to Adjust 3 Columns in Email Template for On-The-Go Users","og_description":"In modern world of large screens,by applying the optimum solution, one can overcome the struggle of aligning 3 column email template for mobile users.","og_url":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2016-04-30T08:56:48+00:00","article_modified_time":"2020-10-21T10:24:03+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image-540x282.jpg","type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/","url":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/","name":"How to Adjust 3 Columns in Email Template for On-The-Go Users","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"In modern world of large screens,by applying the optimum solution, one can overcome the struggle of aligning 3 column email template for mobile users.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/04\/3-Column-Featured-image.jpg","width":"1170","height":"470","caption":"3 Column Layout email template"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/adjust-3-columns-in-email-for-on-the-go-users\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Adjust 3 Columns in Email for On-The-Go Users"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/3405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=3405"}],"version-history":[{"count":17,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/3405\/revisions"}],"predecessor-version":[{"id":22793,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/3405\/revisions\/22793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/3408"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=3405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=3405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=3405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}