Level 2

Solved

Change the display location for image and text for the email template on mobile

Forum|Forum|4 years ago
November 12, 2021
2 replies
3938 views

We design a template for email: " Right-image and Left text", and "Right-text and Left-image". For the template "Right-image and Left text" which has an issue on Mobile. We want to display the right-image above the left-text on Mobile. How can we achieve it?

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Jo_Pitts1

@eve_yu , in the absence of any code, we can't provide a fully worked solution. However, here is a generic solution that'll work.

Put this in your CSS

      @media screen and (max-width:600px) {
        .top {
          display: table-header-group !important;
          width: 100% !important;
        }
        .bottom {
          display: table-footer-group !important;
          width: 100% !important;
        }
      }

And this in your module

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
  <tr>
    <td class="bottom" style="width:50%;">
      <table border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <td>
            <p>Put your content here</p>
          </td>
        </tr>
      </table>
    </td>
    <td align="left" class="top" style="width:50%">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td align="center">
            <img alt="" src="https://yourimagegoeshere.com/image.png>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

That should work hunky dunky. It relies on using header and footer groups which have ordering intrinsic to them.

Regards

Jo

SanfordWhiteman

Level 10

It's not possible to answer questions like this without seeing your code!

Jasbirka

Level 5

Hi @eve_yu

Yes, we can do this by using the direction property in the columns.

Please share the coding or layout so that I can let you know how & where you can use the direction property.

Thanks!

Jasbir

Eve_YuAuthor

Level 2

We used this code

@media only screen and (min-width: 480px){
.hide-pc {
display:none !important;
overflow:hidden;

mso-hide:all;
margin:0;
font-size:0;
max-height:0;
}
}
@media only screen and (max-width: 479px){
.hide-mobile {
display:none !important;
overflow:hidden;
mso-hide:all;
margin:0;
font-size:0;
max-height:0;
}
}

And this is our layout, we want to display the image 2 above the text 1 on mobile.

Jo_Pitts1

Accepted solution

Community Advisor

@eve_yu , in the absence of any code, we can't provide a fully worked solution. However, here is a generic solution that'll work.

Put this in your CSS

      @media screen and (max-width:600px) {
        .top {
          display: table-header-group !important;
          width: 100% !important;
        }
        .bottom {
          display: table-footer-group !important;
          width: 100% !important;
        }
      }

And this in your module

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
  <tr>
    <td class="bottom" style="width:50%;">
      <table border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <td>
            <p>Put your content here</p>
          </td>
        </tr>
      </table>
    </td>
    <td align="left" class="top" style="width:50%">
      <table cellpadding="0" cellspacing="0" role="presentation" width="100%">
        <tr>
          <td align="center">
            <img alt="" src="https://yourimagegoeshere.com/image.png>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

That should work hunky dunky. It relies on using header and footer groups which have ordering intrinsic to them.

Regards

Jo

Eve_YuAuthor

Level 2

@jo_pitts1 Thanks for your help. It works.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded