Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Email signature resizing issues

S

StevieD009

New Coder
Hi all,
I'm trying to build an email signature from a template I purchased, and as always I'm running into issues :)

1) The divider line (little grey line below the title) seems to be spacing in a strange way when I add the signature in Gmail
2) The signature is displaying too big on desktop, and barely readable on mobile, so it seems there is a size definition issue?

Including a screenshot of how it looks in Dreamweaver, and what I'm hoping to get to. Any help is greatly appreciated, thanks!

example2.jpg

Code: 
<style type="text/css">
     /* Client-specific Styles */
     #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
     body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
     /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
     .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
     .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing.*/
     img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode:bicubic;}
     a img {border:none;text-decoration:none;border:none; -ms-interpolation-mode:bicubic;}
     p {margin: 0px 0px !important;}
     table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
     table td {border-collapse: collapse;}

     /*STYLES*/
     /*################################################*/
     /*IPAD STYLES*/
     /*################################################*/
     @media only screen and (max-width: 640px) {
         a[href^="tel"], a[href^="sms"] {
         text-decoration:none;
         color:#212121; /* or whatever your want */
         pointer-events:none;
         cursor:default;
         }
         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration:default;
         color:#212121 !important;
         pointer-events:auto;
         cursor:default;
         }
     }
    
     /*##############################################*/
     /*IPHONE STYLES*/
     /*##############################################*/
     @media only screen and (max-width: 480px) {
         a[href^="tel"], a[href^="sms"] {
         text-decoration:none;
         color:#212121; /* or whatever your want */
         pointer-events:none;
         cursor:default;
         }
         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration:default;
         color:#212121 !important;
         pointer-events:auto;
         cursor:default;
         }
     }
        
    @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
</style>

<table width="640" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tbody>
        <tr>
            <td width="90" valign="top" align="left" style="padding:0 20px 0 0;">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td valign="middle" align="center" style="width:90px; height:90px; background:#ffffff;">
                            <img src="https://cdn.shopify.com/s/files/1/2677/6462/files/Physicians_Choice_Logomark-01.png?v=1590690081" alt="Logo" style="display:block; border:none;" />
                        </td>
                    </tr>
                </table>
            </td>
            <td width="562" valign="top" align="left">
            
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tbody>
                        <tr>
                            <td style="font-family:'Montserrat', sans-serif, Arial; font-size:16px; line-height:24px; font-weight:700; color:#221f1f; padding:0 0 0 10px; letter-spacing:2px; text-transform:uppercase;">Steven Davis</td>
                        </tr>
                        <tr>
                            <td style="font-family:'Montserrat', sans-serif, Arial; font-size:10px; line-height:14px; font-weight:400; color:#212121; padding:0 0 0 10px; letter-spacing:1px; text-transform:uppercase;">Creative Director</td>
                        </tr>
                        <tr>
                            <td style="padding:15px 0 10px 10px;"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/divider.jpg?v=1590690669" alt="" /></td>
                        </tr>
                        <tr>
                            <td align="left" style="padding:5px 0 10px 10px;">
                                
                                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                    <tbody>
                                        <tr>   
                                            <td width="7%" height="25" align="left" valign="middle"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/icon-phone_dark.png?v=1590690081" alt="Phone" style="display:block;" /></td>
                                            <td width="93%" height="25" align="left" valign="middle" style="font-family:'Montserrat', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:400; color:#212121; letter-spacing:.5px;">720 409 9007</td>
                                        </tr>
                                        <tr>
                                            <td width="7%" height="25" align="left" valign="middle"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/icon-email_dark.png?v=1590690081" alt="Email" style="display:block;" /></td>
                                            <td width="93%" height="25" align="left" valign="middle" style="font-family:'Montserrat', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:400; color:#212121; letter-spacing:.5px;">
                                            <a href="mailto:[email protected]" style="text-decoration:none; color:#2f3542;">[email protected]</a></td>
                                        </tr>
                                        <tr>
                                            <td width="7%" height="25" align="left" valign="middle"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/icon-web_dark.png?v=1590690081" alt="Physician's Choice Website" style="display:block;" /></td>
                                            <td width="93%" height="25" align="left" valign="middle" style="font-family:'Montserrat', sans-serif, Arial; font-size:12px; line-height:24px; font-weight:400; color:#212121; letter-spacing:.5px;">
                                            <a href="https://www.physicianschoice.com" style="text-decoration:none; color:#2f3542;">physicianschoice.com</td>
                                        </tr>
                                    </tbody>
                                </table>
                                
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:10px 0 0 5px;">
                                <a href="https://www.facebook.com/PhysiciansChoice/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/social-facebook_dark.png?v=1590690081" alt="Facebook" /></a>
                                <a href="https://twitter.com/PhysiciansCh" target="_blank"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/social-twitter_dark.png?v=1590690081" alt="Twitter" /></a>
                                <a href="https://www.instagram.com/physicianschoice/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/social-instagram_dark.png?v=1590690081" alt="Instagram" /></a>
                                <a href="https://www.pinterest.com/physicianschoicesupplements/" target="_blank"><img src="https://cdn.shopify.com/s/files/1/2677/6462/files/social-pinterest_dark.png?v=1590690081" alt="Pinterest" /></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
            </td>
        </tr>
    </tbody>
</table>
 
Sort by date Sort by votes
Hello @StevieD009!

Apologies for the delay! I will look into this when I get home. However, try adjusting the margin with the divider line. That may do the trick.

And for size of signature I’d recommend adjusting values within @media.

Please note, I will go more in depth when I get home.
 
Upvote 0 Downvote
Hey @StevieD009 , what you can also do, if you haven't already.. is you can give the outer most container of the title section a "border-bottom: <insert thickness color style>", or the outer most container of the contact section a "border-top: <insert thickness color style>"
ex:

border-bottom: 2px ridge red;

that right there should take care of your line issue, no need to have an extra on there, as far as the resizing issue, @media queries are your best friends lol

also, if you ever need templates lol, here is a great resource, for free:

CodePen Search

codepen.io codepen.io
 
Upvote 0 Downvote
Master Yoda said:
Hello @StevieD009!

Apologies for the delay! I will look into this when I get home. However, try adjusting the margin with the divider line. That may do the trick.

And for size of signature I’d recommend adjusting values within @media.

Please note, I will go more in depth when I get home.
Click to expand...
Thanks Master Yoda -- I would really appreciate it if you could further clarify what I need to do in those @media queries - I've experimented briefly adjusting them, but don't really see any difference in the outcome, so I'm sure I'm doing something wrong. lmk, thx!
 
Upvote 0 Downvote
Antero360 said:
Hey @StevieD009 , what you can also do, if you haven't already.. is you can give the outer most container of the title section a "border-bottom: <insert thickness color style>", or the outer most container of the contact section a "border-top: <insert thickness color style>"
ex:

border-bottom: 2px ridge red;

that right there should take care of your line issue, no need to have an extra on there, as far as the resizing issue, @media queries are your best friends lol

also, if you ever need templates lol, here is a great resource, for free:

CodePen Search

codepen.io codepen.io
Click to expand...
Thanks Antero - I have added the border-top code and have that working, but not sure how to make it where it looks like the current divider, as opposed to running across the entire container? I'm assuming it's another border style, but lmk if you have an idea, thx!
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom