Currently, I have a <table>
for the entire page and another <table>
specifically for the header. The header table consists of two columns containing simple images. Here is the initial layout:
https://i.sstatic.net/dQpSC.png
While these columns are responsive, my goal is to limit the header width to a maximum and minimum of 640 pixels. Despite using sample images here, the actual ones are smaller with no space between them. Adding padding affects responsiveness adversely.
When resizing the window, the right-hand image drops below the first one, which is ideal (see the responsive layout below). However, this transition should occur once the screen size falls below 640 pixels, not just when hitting that particular point.
Responsive layout:
https://i.sstatic.net/KT7hr.png
To achieve a fixed header width of 640 pixels and ensure responsiveness kicks in under 640 pixels, what adjustments do I need to make? Below is the current code snippet used:
<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>