mjml: Columns breaks on some Google Apps account

I had the same issue on gmail for work (did not happen on the personal/free version), after choosing “display images” the layout was breaking, columns became rows. After some research, found out that some newsletters displayed images by default, the difference was that those images are served on a httpS connection, while those that are blocked, are on a normal http connection. Serving the images on a httpS connection fixed the issue to me!

Hi,

I have same issue with gmail (Thunderbird , yahoo is ok)

First time, Gmail and thunderbid add . before style

<style type="text/css">
  @media only screen and (min-width:480px) {
    .mj-column-per-60 { width:60%!important; }
..mj-column-per-40 { width:40%!important; }
..mj-column-per-100 { width:100%!important; }
..mj-column-per-33 { width:33.333333333333336%!important; }
  }
</style>

I move the media in general style.

All it’s OK in Thunderbird and Gmail /**** Media Query ****/

@media only screen and (min-width:480px) {
	.mj-column-per-50 { width:50%!important; }
	.mj-column-per-100 { width:100%!important; }
	.mj-column-per-33 { width:33.333333333333336%!important; }
}

. But in Gmail, other problem —> Name class has been renamed :

<div class="m_-3012835233884925647mj-column-per-100 m_-3012835233884925647outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%">

Regards

Atch

AFISK, Google app removes all script tag. So the key point is how columns being performed without script tag. I think that now we treat it as single column.

This is my custom module that displays 2 cols. It’s not optimised yet.

  class TwoColumnVideoThumbnails extends Component {
    render() {
      const {mjAttribute} = this.props
      let thumb1 = mjAttribute('thumb1');
      let link1 = mjAttribute('link1');
      let desc1 = {__html: mjAttribute('desc1')}
      let thumb2 = mjAttribute('thumb2');
      let link2 = mjAttribute('link2');
      let desc2 = {__html: mjAttribute('desc2')}

      let textColor = mjAttribute('textColor');

      let listStyle = {
        'fontFamily': 'Arial',
        'width': '90%',
        'margin': '0 auto'
      }

      let itemStyle = {
        'fontFamily': 'Arial',
        'width': '50%',
        'float': 'left',
        'margin': '0 auto',
        'textAlign': 'center'
      }

      let linkStyle = {
        'textDecoration': 'none'
      }

      let thumbStyle = {
        width: '90%',
        'maxWidth': '300px'
      }

      let descStyle = {
        color: textColor,
        'fontFamily':'Arial, Helvetica, sans-serif',
        'fontSize': '10pt',
        'lineHeight': '120%'
      }
      return (
        <MJMLRaw>
          <div className="list-news" style={listStyle}>
            <style>{"\
            .list-news{\
              margin:0 auto;\
            }\
            .list-news .col6{\
              width:50%;\
              float:left;\
              margin:0 auto;\
              text-align:center;\
            }\
            @media (max-width: 500px){\
              .list-news .col6{\
                width:100%!important;\
              }\
            }"}</style>
            <div className="col6" style={itemStyle}>
              <a href={link1} style={linkStyle}>
                <img src={thumb1} style={thumbStyle}/>
                <div style={descStyle} >
                  <p dangerouslySetInnerHTML={desc1}></p>
                </div>
              </a>
            </div>
            <div className="col6" style={itemStyle}>
              <a href={link2} style={linkStyle}>
                <img src={thumb2} style={thumbStyle}/>
                <div style={descStyle} >
                  <p dangerouslySetInnerHTML={desc2}></p>
                </div>
              </a>
            </div>
          </div>
        </MJMLRaw>
      )
    }
  }

Meh, don’t know why media queries aren’t applied

@joaopvilla I sent you an email from litmus, do you have the same problem ?