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.
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
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.
ok try to give space like this
vertical space
Horizontal space