{"Status":true,"Message":"","Response":{"post":{"postuid":"qmsaftb8hb","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"239698c5-f7eb-4574-8cc8-c6568f08b3a0","title":"Two Column Container","slug":"article/qmsaftb8hb-two-column-container","html":"\u003Cp\u003EThe Two Column Container widget is a very flexible layout widget you can use to achieve various formatting options in the body of your email. It\u0027s is fully mobile friendly and can either stack columns in mobile devices or not stack columns in mobile.\u003C/p\u003E\u003Ch2 id=\u0022using_the_two_column_container\u0022\u003EUsing the Two Column Container\u003C/h2\u003E\u003Cp\u003EWhen the Two Column Container is added to an email, it is initially configured to show two columns each allowed 50% of the display area. It is initially configured with a pre-set spacing of 10px between the columns:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221026\u0022 data-height=\u0022426\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/70b6d183-411a-4bf3-b256-182752602864.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EUsing the options in the Design section, these options can be configured. \u003C/p\u003E\u003Ch2 id=\u0022setting_column_width\u0022\u003ESetting Column Width\u003C/h2\u003E\u003Cp\u003EChanging the column 1 percentages from 50% to 10% changes the column percentage of column 2 to 90%:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022599\u0022 data-height=\u0022127\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/7e3ed67dc560a9ab2f688a8cc096bc52.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EThis layout enables complete flexibility for the size of the columns to accommodate various formats. \u003C/p\u003E\u003Cp\u003EFor example, an image in the left column that has a width of 150px along with text in the right column:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u0022600\u0022 data-height=\u0022128\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/58064fd0369aa66fe2ba369ca9359809.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch2 id=\u0022setting_space_between_columns\u0022\u003ESetting Space Between Columns\u003C/h2\u003E\u003Cp\u003EUsing the \u003Ccode class=\u0022inline-code\u0022\u003ESpace between columns\u003C/code\u003E slider you can control the exact spacing between columns.\u003C/p\u003E\u003Cp\u003EIt\u0027s recommended to use spacing between column instead of setting padding on items within the columns. When columns stack on mobile the space between columns is eliminated. If padding is used on an element the padding is still shown on mobile.\u003C/p\u003E\u003Ch2 id=\u0022setting_vertical_alignment\u0022\u003ESetting Vertical Alignment\u003C/h2\u003E\u003Cp\u003EThe \u003Ccode class=\u0022inline-code\u0022\u003EVertical Alignment\u003C/code\u003E option enables you to control how the items in each column align vertically. The default is for items to align to the top, but you may want to use other alignment options depending on the desired layout. For example, to show an icon next to a header:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-width=\u00221026\u0022 data-height=\u0022355\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/57eb4c26-5d6e-4d69-bab4-0f0455edcfea.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EIn the example above, using \u003Ccode class=\u0022inline-code\u0022\u003EVertical Alignment\u003C/code\u003E eliminates the need for padding around the text to attempt to middle align it with the icon.\u003C/p\u003E\u003Ch2 id=\u0022mobile_device_behavior\u0022\u003EMobile Device Behavior\u003C/h2\u003E\u003Cp\u003EThe default behavior is for columns is to stack vertically on mobile. This simply means that a two column layout will convert to a one column layout with the left most item shown on top.\u003C/p\u003E\u003Cp\u003EHowever, for certain designs, column stacking is unnecessary. To prevent stacking on mobile simply toggle the \u003Ccode class=\u0022inline-code\u0022\u003EDo Not Stack Column\u003C/code\u003E option for On Mobile Devices.\u003C/p\u003E","publish_status":0,"post_type":"Article","authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d","author":{"authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d"},"featured_image_updating":false,"meta_description":"The Two Column Container widget offers flexible, mobile-friendly email layouts with adjustable column widths and spacing, plus stack or no-stack mobile options.","display_toc":true,"has_workingcopy":false,"allow_indexing":true,"sort_order":14,"total_views":839,"date_published":"2025-06-04T14:22:57.133","date_updated":"2025-06-04T14:22:57.803","date_created":"2025-04-24T15:02:41.957"}}}