skip to Main Content

I am creating a newsletter and this three column content block is causing a large white space on the right hand side of iPhone.

I have a two block column coded exactly the same way, and there is no issue.

White space on the right hand side

Here is the two classes I am using:

 .responsive-td {
     width: 100% !important;
        display: block !important;
        padding: 0 !important;
}
.mobile-padding {
        padding: 3% !important;
  }

Here is the code for the block:

<!-- START THREE COLUMN --><table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; margin: auto;" width="100%">
 
  <tr>
   <td align="center" valign="top">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; width: 100%;">
     
      <tr>
       <td align="center" valign="top">
        <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; text-align: left;">
         <!-- First Column -->
          <tr>
           <td align="center" bgcolor="#FFFFFF" class="responsive-td" style="width: 33.33%; padding: 0;">
            <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
             
              <tr>
               <td style="width: 100%; padding: 0;">
                <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; min-width: 100%;">
                 
                  <tr>
                   <td class="mobile-padding" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: normal; line-height: 24px; color: #ffffff; text-align: left; padding: 0px 9px 0px 18px;">
                    <!--[if mso]>
                                                        <a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" width="170" style="display: block; margin: auto;"></a>
                                                        <![endif]--><!--[if !mso]><!--><a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" style="border: 0; width: 100%; display: block; margin: auto;"></a><!--<![endif]--></td></tr><tr>
                   <td align="left" style="padding: 9px 9px 9px 18px; font-family: sans-serif; color: #000000; font-size: 22px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;" valign="top">
                    <h3 class="mobile-padding" style="font-family: sans-serif; color: #000000; font-size: 27px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;">
                     HEADING 3</h3></td></tr><tr>
                   <td align="left" class="mobile-padding" style="padding: 0px 9px 0px 18px; font-family: sans-serif; color: #1F252C; font-size: 18px; font-weight: 400; line-height: 27px;" valign="top">
                    <p class="mobile-padding td-responsive" style="margin-top: 0px; margin-bottom: 0px;">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate, tellus nec elementum interdum, ante justo auctor mi, eu tempus ligula turpis id mi. Vivamus lobortis feugiat pharetra. Pellentesque rutrum leo ipsum, ac mattis enim mattis eu.</p></td></tr></table></td></tr></table></td><!-- Second Column --><td align="center" bgcolor="#FFFFFF" class="responsive-td" style="width: 33.33%; padding: 0;">
            <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
             
              <tr>
               <td style="width: 100%; padding: 0;">
                <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; min-width: 100%;">
                 
                  <tr>
                   <td class="mobile-padding" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: normal; line-height: 24px; color: #ffffff; text-align: left; padding: 0px 18px 0px 9px;">
                    <!--[if mso]>
                                                        <a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk"  width="170" style="display: block; margin: auto;"></a>
                                                        <![endif]--><!--[if !mso]><!--><a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" style="border: 0; width: 100%; display: block; margin: auto;"></a><!--<![endif]--></td></tr><tr>
                   <td align="left" style="padding: 9px 18px 9px 9px; font-family: sans-serif; color: #000000; font-size: 22px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;" valign="top">
                    <h3 class="mobile-padding" style="font-family: sans-serif; color: #000000; font-size: 27px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;">
                     HEADING 3</h3></td></tr><tr>
                   <td align="left" class="mobile-padding" style="padding: 0px 18px 0px 9px; font-family: sans-serif; color: #1F252C; font-size: 18px; font-weight: 400; line-height: 27px;" valign="top">
                    <p class="mobile-padding td-responsive" style="margin-top: 0px; margin-bottom: 0px;">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate, tellus nec elementum interdum, ante justo auctor mi, eu tempus ligula turpis id mi. Vivamus lobortis feugiat pharetra. Pellentesque rutrum leo ipsum, ac mattis enim mattis eu.</p></td></tr></table></td></tr></table></td><!-- Third Column --><td align="center" bgcolor="#FFFFFF" class="responsive-td" style="width: 33.33%; padding: 0;">
            <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
             
              <tr>
               <td style="width: 100%; padding: 0;">
                <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; min-width: 100%;">
                 
                  <tr>
                   <td class="mobile-padding" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: normal; line-height: 24px; color: #ffffff; text-align: left; padding: 0px 18px 0px  9px;">
                    <!--[if mso]>
                                                        <a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk"  width="170" style="display: block; margin: auto;"></a>
                                                        <![endif]--><!--[if !mso]><!--><a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" style="border: 0; width: 100%; display: block; margin: auto;"></a><!--<![endif]--></td></tr><tr>
                   <td align="left" style="padding: 9px 18px 9px 9px; font-family: sans-serif; color: #000000; font-size: 22px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;" valign="top">
                    <h3 class="mobile-padding" style="font-family: sans-serif; color: #000000; font-size: 27px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;">
                     HEADING 3</h3></td></tr><tr>
                   <td align="left" class="mobile-padding" style="padding: 0px 18px 0px 9px; font-family: sans-serif; color: #1F252C; font-size: 18px; font-weight: 400; line-height: 27px;" valign="top">
                    <p class="mobile-padding td-responsive" style="margin-top: 0px; margin-bottom: 0px;">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate, tellus nec elementum interdum, ante justo auctor mi, eu tempus ligula turpis id mi. Vivamus lobortis feugiat pharetra. Pellentesque rutrum leo ipsum, ac mattis enim mattis eu.</p></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><!-- END THREE COLUMN -->

I have tried creating different classes, but nothing is working.

2

Answers


  1. Define the width and height attributes of the image tag to ensure the image displays at the desired dimensions. This prevents distortion and layout issues.

       <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
                <img src="https://example.com/image.jpg" alt="Image" width="600" height="300" style="display:block; width:100%; height:auto;">
            </td>
        </tr>
    </table>
    
    Login or Signup to reply.
  2. ok try to give space like this
    vertical space

    Horizontal space

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search