Content Overflowing

Hi I have content overflowing in my email. I have set hard widths but
it is still overflowing.

<table id="main-table" style="border:none;" width="600">
	<tbody>
		<tr>
			<td style="border:none"><img alt="" height:="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/RollOut_redesign_email_final_01_0.jpg" style="border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;display:block" width="600" /></td>
		</tr>
		<tr>
			<td style="border:none">
			<table style="border:none;font-size:18px;">
				<tbody>
					<tr>
						<td style="border:none;vertical-align:top;width:30%;"><img alt="icons" class="icon-sections" height="auto" src="https://www.tuneupfitness.com/sites/default/files/email_images/RollOut_redesign_email_final_04.jpg" width="100%" /></td>
						<td style="border:none;width:40%;">
						<p id="intro"><strong>Hi ~Contact.FirstName~,</strong><br />
						<br />
						Just wanted to let you know that the new<br />
						Roll Model® Method video has just<br />
						been posted.<br />
						<br />
						<strong>Weekly Roll Out</strong>:&nbsp;<span style="color:#cb333b;font-weight:bold;">%exercise_name</span><br />
						<br />
						<strong>Therapeutic Benefits:</strong> %therapeutic_application</p>
						</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td style="border:none"><a href="https://tuneupfitness.stage.avatarnewyork.com/weekly-roll-model-video#"><img src="%email_image" width="600" /></a></td>
		</tr>
		<tr>
			<td style="border:none;"><img alt="" src="https://www.tuneupfitness.com/sites/default/files/email_images/RollOut_redesign_email_final_08_2.jpg" style="width: 1199px; height: 401px;" /></td>
		</tr>
		<tr>
			<td style="border:none">
			<table style="border:none;font-size:18px;">
				<tbody>
					<tr>
						<td style="border:none;vertical-align:top;width:30%;"><img alt="icons" class="icon-sections" height="auto" src="https://www.tuneupfitness.com/sites/default/files/email_images/RollOut_redesign_email_final_09_0.jpg" width="100%" /></td>
						<td style="border:none;width:40%;">
						<p id="intro">P.S - If you don't already have my book, The Roll Model, you can get that <strong><a href="https://www.tuneupfitness.com/roll-model-book-jill-miller" style="color:#cb333b;text-decoration:underline;cursor:pointer;">here</a></strong>.&nbsp;</p>

						<p id="intro">To get any therapy balls go <strong><a href="https://www.tuneupfitness.com/shop/self-massage-therapy-balls" style="color:#cb333b;text-decoration:underline;cursor:pointer;">here</a></strong>.&nbsp;</p>
						</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td style="border:none;font-size:18px;">
			<p id="outro" style="color:#cb333b; margin-left:35px;">Warmest,<br />
			Jill Miller<br />
			Creator, The Roll Model® Method</p>
			</td>
		</tr>
	</tbody>
</table>

Your table is 600px wide yet you insist on putting an image that is 1199px wide inside:

Something’s gotta give :slight_smile:

If you want the table to remain at 600px width you need to use the table-layout:fixed algorithm otherwise the default is for width to be treated as a minimum (just like height) where tables are concerned.

table{table-layout:fixed}

That will force the table to obey the widths you set but of course that large image will still stick out. You could hide the overflow now as the table-layout:fixed will now allow that to work but the real problem is the large image and you need to set that to 600px wide or 100% and not 1199px.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.