It can be difficult to read a multi-column email on a small screen; having to scroll horizontally is kind of a pain. Reading on small displays tends to work better if it’s done in a linear fashion, from top-to-bottom. Using media queries we can switch a multi-column layout to a single-column one, making it easier to read an email. There are two methods that will be covered here, each with its pros and cons.
This isn’t my preferred technique because the column-wrapping is controlled from the XHTML markup rather than the stylesheet. The way I look at it, wrapping a list into vertical columns is a matter of presentation, not content, and therefore ought to be controlled by the stylesheet in the interests of separating content from presentation. It is up to you if you want to use floats or flex to create a two-column layout. However, if you need support for IE10 and down, you should use float. Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter. Admin Columns Pro allows you to customize the WordPress list table for any post type by adding columns. By adding ACF fields to the list table you will display relevant information, make it filterable, sortable, easy editable (inline & bulk) and you can export content for further use.
Method 1 - Block-level <td> Elements
The first method uses the same column structure covered in the HTML section’s Column Layouts page. Here’s that code:
The default styling for the columns isn’t really a concern here, so let’s skip straight to the media query styles:
Column Lockforce Columns Inline Function
We start off the media query stylesheet by setting the templateColumns table width to 100%, so it’ll adapt to different screen sizes or orientations. The important bit in how this layout switching works comes next: by setting each templateColumnContainer <td> to block-level elements, and reinforcing that with the 100% width declaration, the right column snaps under the left, and we have a single-column view. After that, the image gets its fluid styling and the text gets a size bump.
As we mentioned, each method has its pros and cons. This method is the most stable; by virtue of using standard, tried-and-tested coding conventions, the columns work in every client in desktop view. There are a couple of downsides, however. First is the fact that setting a <td> as a block-level element runs counter to how they’re actually supposed to be used. Second, you can’t swap the order of the columns or do any other fancy layout-shifting stuff without resorting to CSS float or position - properties that don’t enjoy wide or consistent support across email clients.
So, if your aim is stability over flexibility, this is the way to go.
Method 2 - Aligned <table> Elements
Method 2 is the opposite of the first; its strength is flexibility, but it’s not very stable. The columns are coded a little differently:
Column Lockforce Columns Inline Skates
Each column <table> sits within just one <td> this time, and they each get a fixed width of 300px. The most important difference is the presence of the align attribute on each table; this attribute mimics the functionality of CSS float, but it’s actually well-supported across email clients since its HTML-spec.
In the HTML, we’ve moved the class name templateColumnContainer from the <td> elements seen in the first example to both of the aligned <table> elements that make up the left and right columns. Because each <table> is essentially floated, they automatically wrap when the media query is triggered. There’s only one change required in the media query style for templateColumnContainer; we’re now targeting a <table> instead of a <td> element:
Setting the width of each column to 100% allows them to fill the available screen space, just as in the first example. So, what’s bad about this method? Instability. Because the columns are essentially floated, they tend to wrap under one another if there’s any layout wonkiness. You’re likely to run into this problem if the column <table> elements “touch” each other, like placing two 300px-wide columns next to each other in a 600px space. It’s all dependent on how an email client renders tables or calculates widths. Making the columns a little narrower than total width of the space they live in is sometimes a suitable work-around, but it’s not 100% fool-proof.
In spite of those issues, the flexibility inherent to this method and how it allows for layout switching, which you can see covered in Layout Manipulation, is the best reason to use it.