Need help in mobile codes/outlook vml for email newsletter

Need help in mobile codes/outlook vml for email newsletter
0

#1

HI, i have some problems viewing the email nicely in mobile. And im not sure which part did i do wrong. Need some guidance here. Have zero knowledge on media screen codes, I was only copying from mailchimp’s template codes. Below is the one viewed in pc

These are my codes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/

css">
    <title>Book Offer</title>
    <style>
    @media only screen and (max-width: 480px){
	/*
	@tab Mobile Styles
	@section Boxed Text
	@tip Make the boxed text larger in size for better readability on small screens. We recommend a font size of at least 16px.
	*/
		#textContent .textBox, #textContent2 .textBox p{
			/*@editable*/font-size:10px !important;
			/*@editable*/line-height:150% !important;
		}
        }
    </style>
</head>

<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td style="padding:20px 0 30px 0;" valign="top">
    <table align="center" border="0"  cellpadding="0" cellspacing="0" width="600px" style="border-collapse: collapse; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;">    
        <tr>
        <td align="center" bgcolor="#70bbd9" valign="top" >
            <img src="https://preview.ibb.co/cSda7F/Logos_Header.png" alt="Header" width="600px" height="88px" style="display:block;"/>
        
        </td>
        </tr>
        <tr>
        <td background="https://image.ibb.co/m99We5/Welcome_Background_600.png" bgcolor="#ffffff" width="600px" height="510px" valign="top" style="display:block;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:510px;">
    <v:fill type="frame" src="https://image.ibb.co/m99We5/Welcome_Background_600.png" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div>
            <table cellpadding="0" cellspacing="0" width="100%" border="0">
            <tr>
                <td valign="top" align="center" style="font-family: myriad pro; font-size: 32px; color: #000000; padding-top: 70px; padding-bottom: 30px; padding-left:0px;">
                    <b>Welcome to UTeM</b>
                </td>
                </tr>
            <tr>
                  <td id="textContent" valign="top" class="textBox"align="center" style="padding:0px 130px 0px 130px; font-family:calibri light; font-size:12px; text-align:justify; text-indent:30px;" >
                      UTeM Postgraduate Club or Kelab Pasca Siswazah UTeM (KePS) welcomes you to join our postgraduate family. This club serves as an information center and medium for you to get your hands on events like conference and workshop, learn to write your thesis and get more friends across different faculties. Our aim is to help all postgraduate students in UTeM to effectively receive information and build a creative learning environment. Once you have registered your email with us, you will receive email from time to time on book offers, events and so on.  Files attached in this email are the <b><i>Academic Calendar of 2017/2018</i></b> and <b><i>KePS Organization Chart</i></b> where you could find your faculty representatives if you needed any help. Lastly, enjoy your university postgraduate life!
                 </td>
                </tr>
                <tr>
                <td id="textContent2" valign="top" class="textBox" style="font-family:calibri light; font-size:12px; color:#000000; padding: 80px 20px 0px 120px;">
                    Visit our <a href="https://www.facebook.com/keps.utem/">Facebook Page</a> for more info,<br>or email us at <a href="mailto:[email protected]">[email protected]</a>.
                </td>
                </tr>
            </table>
        
            
          </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
        </tr>
        <tr>
        <td valign="top" bgcolor="#000000" style="font-family:calibri light; font-size:10px; color:grey; text-align:center; padding:10px 0px 10px 0px; line-height:1.2;">
            <i>UTeM Postgraduate Club<br>Kelab Pasca-Siswazah UTeM (KePS UTeM)</i>
            <br><br><b>Universiti Teknikal Malaysia Melaka</b>
            <br>Hang Tuah Jaya,<br>76100 Durian Tunggal,<br>Melaka, Malaysia.<br><br>
            You're receiving this email because you have just enrolled as UTeM postgraduate student. <br>If you choose not to receive any email updates from KePS UTeM, please write us an email.
        </td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    
    
    

</body>
</html>

Please guide me. Thanks.


#2

And this is what it looks like in phone Gmail.


#3

It’s probably because of your fixed height: 510px; here:

<td background="https://image.ibb.co/m99We5/Welcome_Background_600.png" bgcolor="#ffffff" width="600px" height="510px" valign="top" style="display:block;">

In smaller screens the content height is higher than that so it overflows.


#4

Well, even if i didn’t set the height there the bottom line of for more info will still be outside of the white box because the white box is part of the background image which is somehow fixed. So, in this case, i need to shrink the text size which i tried, but failed. Which part did i do wrong?


#5

Ah, I just realized it about the background. Does your media query work fine on smaller screens? Did you validate that? I’m not very familiar with email templating either. I’d play with values in the devtools to get the result I want.


#6

No the media query doesnt change the font size as it should. And i’m don’t know which part did i do wrong.


#7

I have solved the problem with a workaround by changing the layout of the tables and creating more cells. However, now I have faced a new problem where I couldn’t get the background colour loaded in Outlook. This is the one shown in Gmail

This is my new code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/

css">
    <title>Welcome Email</title>
    <style>
    @media only screen and (max-width: 480px){
	/*
	@tab Mobile Styles
	@section Boxed Text
	@tip Make the boxed text larger in size for better readability on small screens. We recommend a font size of at least 16px.
	*/
		#textContent .textBox, #textContent2 .textBox {
			/*@editable*/font-size:10px !important;
			/*@editable*/line-height:150% !important;
		}
        }
    </style>
</head>

<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td style="padding:20px 0 30px 0;" valign="top">
    <table align="center" border="0"  cellpadding="0" cellspacing="0" width="600px" style="border-collapse: collapse; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;">    
        <tr>
        <td align="center" bgcolor="#70bbd9" valign="top" >
            <img src="https://preview.ibb.co/cSda7F/Logos_Header.png" alt="Header" width="600px" height="88px" style="display:block;"/>
        
        </td>
        </tr>
        <tr>
        <td background="https://preview.ibb.co/fEV81v/Welcome_Background_1024_no_white.png" bgcolor="#ffffff" width="600px" height="auto" valign="top" style="display:block;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
    <v:fill type="frame" src="https://preview.ibb.co/fEV81v/Welcome_Background_1024_no_white.png" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div>
            <table cellpadding="0" cellspacing="0" width="100%" border="0">
            <tr>
                <td style="padding:10px" >&nbsp;
                </td>
            </tr>
                <tr><td>
                    <table valign="top" cellpadding="0" cellspacing="0" border="0">
                    <td width="15%">&nbsp;</td>
                    <td width="70%">

                    <table valign="top" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:rgba(255,255,255,0.5); box-shadow:0px 0px 10px 3px rgba(0,0,0,0.2);">
 <!--[if gte mso9]>
   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 100%; height: auto;">
    <v:fill type="frame" opacity="20%" color="#ffffff"  />
    <v:textbox inset="0,0,0,0">
      <![endif]-->
                        <div>
                        <tr>
                <td valign="top" align="center" style="font-family: myriad pro; font-size: 32px; color: #000000; padding-top: 30px; padding-bottom: 30px; margin-left:0px;">
                    <b>Welcome to UTeM</b>
                </td>
                
                </tr>
            <tr>
                  <td id="textContent" valign="top" class="textBox"align="center" style="padding:0px 40px 0px 40px; font-family:calibri light; font-size:12px; text-align:justify; text-indent:30px;" >
                      UTeM Postgraduate Club or Kelab Pasca Siswazah UTeM (KePS) welcomes you to join our postgraduate family. This club serves as an information center and medium for you to get your hands on events like conference and workshop, learn to write your thesis and get more friends across different faculties. Our aim is to help all postgraduate students in UTeM to effectively receive information and build a creative learning environment. Once you have registered your email with us, you will receive email from time to time on book offers, events and so on.  Files attached in this email are the <b><i>Academic Calendar of 2017/2018</i></b> and <b><i>KePS Organization Chart</i></b> where you could find your faculty representatives if you needed any help. Lastly, enjoy your university postgraduate life!
                 </td>
                </tr>
                <tr>
                <td id="textContent2" valign="top" class="textBox" style="font-family:calibri light; font-size:12px; color:#000000; padding: 50px 20px 30px 40px;">
                    Visit our <a href="https://www.facebook.com/keps.utem/">Facebook Page</a> for more info,<br>or email us at <a href="mailto:[email protected]">[email protected]</a>.
                </td>
                </tr>
                        </div>
     <!--[if gte mso 9]>
 </v:textbox>
    </v:fill>
  </v:rect>
  <![endif]-->
                        </table>
                    
           
                    </td>
                <td width="15%">&nbsp;</td>
                    </table>
                    </td>
                </tr>
                 <tr>
      <td style="padding:10px;">&nbsp;</td></tr>
            </table>
       
            
          </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
        </tr>
        <tr>
        <td valign="top" bgcolor="#000000" style="font-family:calibri light; font-size:10px; color:grey; text-align:center; padding:10px 0px 10px 0px; line-height:1.2;">
            <i>UTeM Postgraduate Club<br>Kelab Pasca-Siswazah UTeM (KePS UTeM)</i>
            <br><br><b>Universiti Teknikal Malaysia Melaka</b>
            <br>Hang Tuah Jaya,<br>76100 Durian Tunggal,<br>Melaka, Malaysia.<br><br>
            You're receiving this email because you have just enrolled as UTeM postgraduate student. <br>If you choose not to receive any email updates from KePS UTeM, please write us an email.
        </td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    
    
    

</body>
</html>

Please help.


#8

This is the one shown in Outlook.


#9

how do i keep this topic up? i need to solve this asap.


#10

Media queries are not supported in outlook.

If this is really something you need asap, use google to find a company who specialize in email campaigns. The Free Code Camp forum is designed to support campers working on the challenges of the FreeCodeCamp.org site.

There are some forum users who have more advanced knowledge, but no one has to respond to a post. If someone wants to assist you and can they will do so.

Email campaigns and Outlook has always been complicated. That is why companies exist whose sole purpose is to understand the limitations of all the different email clients used on the market. They are able to make money because there is not an easy solution sometimes. Unfortunately, sometimes you may have accept you will have to change your design layout just to make it look the same on 99% of the email clients out there.

I am not saying what you are wanting to do is impossible, but it may be time to consult another forum in additional to this one to accomplish what you want.


#11

Thank you very much again for the explanation and suggestion. I will wait then for whoever that is able to help. In the mean time, I will also post in other forum as well.