Hello Users,
In the today world you can create a responsive newsletter with help fo simple CSS.
You just follow 3 steps:-
1:- No Fixed Width
Generally we create f wrapper for a frame with fixed width. In this we can not use any fixed
width. For example:-
<table style=”width: 600px;”>
one would write
<table style=”width: 100%;”>
Make sure to add these styles to each table cell that contains content:
<td style=”max-width: 600px; display: block; clear: both;”>
For images, it’s important to not set a width within the image tag, otherwise Android will
stretch out the container of the image to that given width. It’s required to include a maximum
width style to the image:
”"
2:- Table Setup
In order to make the collapsing of content blocks work, you can use a table within a table
setup like this:
<body>
<table width="100%">
<tr>
<td></td>
<td style="max-width: 600px; display: block; clear: both;">
<table style="width: 100%;">
<tr>
<td>Content Block 1</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
<table width="100%">
<tr>
<td></td>
<td style="max-width: 600px; display: block; clear: both;">
<table style="width:100%;">
<tr>
<td>Content Block 2</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
3:- Viewport
Most Important check viewport like this:-
copytext
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1?>
Now your template behave like responsive Newsletter.
For such more Blogs you can just visit to http://findnerd.com/NerdDigest
No comments:
Post a Comment