CODEWITHSUNDEEP
csshtml-emailresponsive
Jeswin
Jeswin

Reputation: 25

Facing issue in aligning the overall content when it is responsive

I am following an in-line style method to develop this layout. When I make it responsive, the body and footer content is not getting aligned. As you can see in the image shared on the link, contents are not well aligned when it is responsive:

when it is responsive

and here's my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttle Up Coaching</title>
</head>
<style type="text/css">
    @media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
        body{width: 400px;}
        .gutter img p{width: 400px;}
        .content{width: 400px;}
        .social-connect {width: 100%;}
    }
</style> 
<body bgcolor="#EEE">
    <div class="content">
        <table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
            <tr>
                <td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
                    <a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
                </td>
            </tr>
            <tr>
                <td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
                    <img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
                    <img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
                    <div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
                        <p >My Matching Interview has enrolled you in an interview<br>
                        <h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
                        access and complete your interview
                        </p><br>
                        <a href="https://interview-master.client-ui.javelin.scr.ee/question/447/942" target="_blank" style="color: #fff; background-color: #29CC8F; font-weight: 800; padding: 20px 25px; border-radius: 0.5rem; display: inline-block; text-decoration: none;">COMPLETE YOUR INTERVIEW</a>
                        <br><br>
                        <hr>
                        <p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact <a href="mailto:[email protected]">[email protected]</a> or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
    <div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
        <table align="center" style="display:inline-block;">
            <tr>
                <td>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn"></a>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook"></a>
                    <a href="#"><img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus"></a>
                    <br><br><br>
                    <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
                        You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
                        Javelin Corporation&reg; All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
                        receive emails from us regarding new features, events and special offers.<br><br>
                        <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
                            <a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
                            <a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
</body>
</html>

Any help to fix this issue will be greatly appreciated. Thank you!

Upvotes: 1

Views: 75

Answers (1)

Syfer
Syfer

Reputation: 4479

There were a few things (I think) was wrong with your HTML.

  1. Body of the mobile device was set to 400px
  2. content was set to 400px

I have added a new class container to change the width of the outer table on mobile devices.

Below is the update code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttle Up Coaching</title>
</head>
<style type="text/css">
    @media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
        .social-connect {width: 100%;}
        .container{width:100% !important;}
    }
</style> 
<body bgcolor="#EEE">
    <div class="content container">
        <table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
            <tr>
                <td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
                    <a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
                </td>
            </tr>
            <tr>
                <td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
                    <img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
                    <img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
                    <div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
                        <p >My Matching Interview has enrolled you in an interview<br>
                        <h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
                        access and complete your interview
                        </p><br>
                        <a href="https://interview-master.client-ui.javelin.scr.ee/question/447/942" target="_blank" style="color: #fff; background-color: #29CC8F; font-weight: 800; padding: 20px 25px; border-radius: 0.5rem; display: inline-block; text-decoration: none;">COMPLETE YOUR INTERVIEW</a>
                        <br><br>
                        <hr>
                        <p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact <a href="mailto:[email protected]">[email protected]</a> or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
    <div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
        <table align="center" style="display:inline-block;">
            <tr>
                <td>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn"></a>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook"></a>
                    <a href="#"><img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus"></a>
                    <br><br><br>
                    <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
                        You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
                        Javelin Corporation&reg; All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
                        receive emails from us regarding new features, events and special offers.<br><br>
                        <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
                            <a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
                            <a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
</body>
</html>

Upvotes: 1

Related Questions