Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Create a Responsive newsletter ?

    • 0
    • 2
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 748
    Comment on it

    Hello Users,

    In the today world you can crate 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, its important to not set a width within the image tag, otherwise Android will stretch out the container of the image to that given width. Its 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:-

    <meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1>
    

    Now your template behave like responsive Newsletter.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: