..................
WORDFLY FEATURE
..................

I want to add the code that adds support for vertical alignment in 2- and 3-column containers.

For "WordFly 3.1.0" emails and newer

If your email is older than this, please reach out to support@wordfly.com for assistance.


..................
SOLUTION
..................

STEP 1.
Open the HTML Editor at the bottom of your email.



STEP 2.
Scroll down to approximately line #42
Can't find it? Click inside the HTML editor. Hit Control-F to search for "/* used for 2 and 3 "column" areas */"



STEP 3.

Replace these four lines of code:

.column { float: left; }
.desktop-reverse .column { float: right; }
.two-columns-block .column { width: 50%; }
.three-columns-block .column { width: 33.33333333%; }


With these six lines of code:

[class*=columns-block] { font-size: 0; }
.column { font-size: initial; display: inline-block; vertical-align: top; }
.desktop-reverse { direction: rtl; }
.desktop-reverse > .column { direction: ltr; }
.two-columns-block .column { width: 50%; }
.three-columns-block .column { width: 33.33333333%; }


STEP 4.
Scroll down to approximately line #152
Can't find it? Click inside the HTML editor. Hit Control-F to search for "/* device width specific (e.g. iPhone-ish) */"


STEP 5.

Replace these five lines of code:

.two-columns-block .column,
.three-columns-block .column {
  float: none !important;
  width: 100% !important;
}

With these five lines of code:

.two-columns-block .column,
.three-columns-block .column {
  display: block !important;
  width: 100% !important;
}


STEP 6.
Scroll down to approximately line #156
Can't find it? Click inside the HTML editor. Hit Control-F to search for "/* mobile scale rules */"


STEP 7.

Replace these two lines of code:

.mobile-scale .column { float: left !important; }
.mobile-scale.desktop-reverse .column { float: right !important; }

With these three lines of code:

.mobile-scale > .column { display: inline-block !important; }
.mobile-scale.desktop-reverse { direction: rtl !important; }
.mobile-scale.desktop-reverse > .column { direction: ltr !important; }


STEP 8.
Click Save