Email Pattern: Arlequin Order Shift Layout Pattern CSS

arlequin-shift-pattern-email.css

/* Arlequin Order Shift Layout Pattern CSS */
@media only screen and (max-width: 599px) {
  td[class="arlequin2col"] .product_image img {
    width: 100%;
    height: auto !important;
  }
}
@media only screen and (max-width: 460px) {
  td[class="arlequin2col"] .product { padding: 0 !important; }
  td[class="arlequin2col"] .product_description {
    padding-right: 0 !important;
    width: 100%;
  }
  td[class="arlequin2col"] .product_image { display: none; }
  td[class="arlequin2col"] .product_image_small {
    display: table-cell !important;
    width: 100% !important;
    height: auto !important;
    max-height: inherit !important;
    overflow: visible !important;
    float: none !important;
  }
  td[class="arlequin2col"] .product_image_small img {
    width: 100%;
    display: block !important;
  }
}

arlequin-shift-pattern-email.pug

// Arlequin Order Shift Layout Pattern CSS 

code(style='color:red;font-size:1.4rem;display:block;text-align:center;max-width:600px;margin:0 auto')
  | Arlequin Order Shift Layout Pattern CSS 

table.main(cellpadding='0', cellspacing='0')
  tr
    td.arlequin2col(width='600', style='background: #d8d8d8;')
      table(cellpadding='0', cellspacing='0', width='100%')
        tr
          td.product
            table(cellpadding='0', cellspacing='0', width='100%')
              tr
                td.product_image_small(style='display: none; width: 0; height: 0; max-height: 0; overflow: hidden; float: left;')
                  img(src='http://placehold.it/400x180', alt='', style='display: none; border: 0;')
              tr
                td.product_description(width='50%', align='left')
                  table(cellpadding='0', cellspacing='0')
                    tr
                      td(align='left', style='font-family: arial,sans-serif; font-size: 16px; color: #333;')
                        .pad(style='padding:1rem')
                          | Title
                          br
                          strong(style='font-size: 20px; color: #d21a22;') XXXX.XX €
                          br
                          span(style='font-size: 12px;') Headline
                td.product_image(width='50%')
                  img(src='http://placehold.it/400x180', width='100%', alt='', style='display: block; border: 0;')
        tr
          td.product
            table(cellpadding='0', cellspacing='0', width='100%')
              tr
                td.product_image_small(style='display: none; width: 0; height: 0; max-height: 0; overflow: hidden; float: left;')
                  img(src='http://placehold.it/400x180', alt='', style='display: none; border: 0;')
              tr
                td.product_image(width='50%')
                  img(src='http://placehold.it/400x180', width='100%', alt='', style='display: block; border: 0;')
                td.product_description(width='50%', align='left')
                  table(cellpadding='0', cellspacing='0')
                    tr
                      td(align='left', style='font-family: arial,sans-serif; font-size: 16px; color: #333;')
                        .pad(style='padding:1rem')
                          | Title
                          br
                          strong(style='font-size: 20px; color: #d21a22;') XXXX.XX €
                          br
                          span(style='font-size: 12px;') Headline
        tr
          td.product
            table(cellpadding='0', cellspacing='0', width='100%')
              tr
                td.product_image_small(style='display: none; width: 0; height: 0; max-height: 0; overflow: hidden; float: left;')
                  img(src='http://placehold.it/400x180', alt='', style='display: none; border: 0;')
              tr
                td.product_description(width='50%', align='left')
                  table(cellpadding='0', cellspacing='0')
                    tr
                      td(align='left', style='font-family: arial,sans-serif; font-size: 16px; color: #333;')
                        .pad(style='padding:1rem')
                          | Title
                          br
                          strong(style='font-size: 20px; color: #d21a22;') XXXX.XX €
                          br
                          span(style='font-size: 12px;') Headline
                td.product_image(width='50%')
                  img(src='http://placehold.it/400x180', width='100%', alt='', style='display: block; border: 0;')
        tr
          td.product
            table(cellpadding='0', cellspacing='0', width='100%')
              tr
                td.product_image_small(style='display: none; width: 0; height: 0; max-height: 0; overflow: hidden; float: left;')
                  img(src='http://placehold.it/400x180', alt='', style='display: none; border: 0;')
              tr
                td.product_image(width='50%')
                  img(src='http://placehold.it/400x180', width='100%', alt='', style='display: block; border: 0;')
                td.product_description(width='50%', align='left')
                  table(cellpadding='0', cellspacing='0')
                    tr
                      td(align='left', style='font-family: arial,sans-serif; font-size: 16px; color: #333;')
                        .pad(style='padding:1rem')
                          | Title
                          br
                          strong(style='font-size: 20px; color: #d21a22;') XXXX.XX €
                          br
                          span(style='font-size: 12px;') Headline