SOLVED

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

Go to solution
Eve_Yu
Level 2

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

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? 

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Jo_Pitts1
Level 10 - Community Advisor

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

@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

 

View solution in original post

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

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

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

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

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_Yu
Level 2

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

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. 

20211116231148.png

Jo_Pitts1
Level 10 - Community Advisor

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

@Eve_Yu ,

I have given you an example that works.  Look at it.

Eve_Yu
Level 2

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

Thanks for your reply. We will have a try. 

Jo_Pitts1
Level 10 - Community Advisor

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

@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_Yu
Level 2

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

@Jo_Pitts1 Thanks for your help. It works.