0

I think that I have 2 questions. First question: I copied this code from a website thinking it was responsive but I am not sure if it is.

2nd. question: I have viewed in this in gmail The images are huge going as big as my screen which is 2 feet wide. My understanding is that the id logo has a mad-width: 600px. So I don't understand why gmail doesn't respect any boundaries.

Any opinions on if I need to totally scrap this code or is it useable with a fix or two?

Thank You for any help. This email that I want to put out in the next few days has a time limit.

  <!doctype html>

<html lang="en">
<head>
<style type"text/css">
    @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
  * { margin:0;
  border:0;
  padding:0; }
  body {background-color: #F1F4F4;
        font-family:'Quicksand', sans-serif;
        font-size: 16px;
        max-width: 650px;
        margin: 0 auto;
        /*padding: 1%;*/
        color: #565859;}
        
 #wrapper {  margin-right: auto;
           /* tried this which was no different than   margin-left:  auto;
            max-width: 700px; */
         background: #FFF;
        }


 h2 {/*letter-spacing: 1%;*/
        font-weight: 600;
        padding-left: 2%;
        }
 p {padding-left: 2%;
       /* left-align: justify;*/}
        
 img { max-width: 100%}
 
.line {
            clear: both;
            margin: 4% auto;
            width: 90%;
            height: 2px;
            background-color: #E3E9E9;
        }
header { width: 100%;}

#logo { float: left;
             margin: 2% 0 0 3%;
             max-width: 600px;
        }
#callout {    /*float: right; */
    margin: 3% 3% 2% 0;
    height: auto;
    overflow: hidden;}
    
.social li {display: inline;}

.social {
    float: right;
    list-style-type: none;
    margin-top: 4%;
    padding: 0; }
    
.banner { margin-left: 3%;}
    
.btn {float: right; border-radius:8px;
    color: #FFF; font-size: 17px;
    background: #18A0D3; padding: 8px; text-decoration: none;}
    
.button-holder {float: right; margin: 0 2% 4% 0;}

.btn:hover {background: #4EC0EB;}
    
.contact {text-align: center; margin-bottom: 4%;}
</style>
<title><!-- Insert your title here --></title>
</head>
<body>
<div id="wrapper"  >
    <header>
  <div id="logo"><img src="https://ggeddes.com/_media/BannerHomeIs.jpg"></div>                        
    </header>
  <h2>Perks of being with CIR Realty: </h2>

<p>Every month they offer a short getaway contest for Clients of CIR Realtors.  Every month is a 
different destination in Alberta.
I didn't know where Azuridge Estate Hotel was so I looked it up. It looks really nice and is in 
Priddis so just a short hop from the City.
Wish we could enter  <span>&#9786;</span>. </p>
<p style= "padding-left: 2%; padding-top: 2%;"> Before you click, I would suggest that you Copy  - 
Grant Geddes  - so that you can Paste it in the Realtor's® Name field. 
   </p>
<p style= "padding-left: 2%; padding-top: 2%;"> This is important to Grant and I as the CIR Form does 
not automatically put Grant's name in. (You can just type it in directly also)
   </p>
<h3 style= "padding-left: 2%; padding-top: 2%;">The link to this contest is: <a 
href="http://cirrealty.ca/contest">cirrealty.ca/contest</a></h3>

<p style="margin: 10px"> Or Click on the Image.</p>
      <div class="banner">
        <a href="http://cirrealty.ca/contest"><img style ="max-width: 60%" 
src="https://ggeddes.com/_media/October Instagram _ Facebook Posts.jpg"></a>
</div> <p style= "padding-left: 2%; padding-top: 2%;"> We wish you all luck. It would be nice if one 
of our clients wins.  Carol and Grant
   </p>  
    

<div class="line"></div>
<p class= "contact" style = "font-size: 10px;">Information herein deemed reliable but not guaranteed. 
</p> 
<p class="contact">Geddes Group Calgary / CIR Realty<br>
Grant Geddes REALTOR® 403-540-8584<br>
Email: <a href="mailto: geddesgroupcalgary@gmail.com">geddesgroupcalgary@gmail.com</a></p>
<div id="callout">
            <ul class = "social">
                <li><a href="https://www.facebook.com/pages/The-Geddes-Group-Real-Estate- 
Calgary/792213167479235"
                       target = "_blank">
<img src="https://www.ixactcontact.com/iXactAccountContent/CnttzVNt/Images/facebook.png" width="17"
                     height="17" /></a></li>
            
<li><a href="https://twitter.com/TheGeddesGroup" target = "_blank"><img 
src="https://www.ixactcontact.com/iXactAccountContent/CnttzVNt/Images/twitter.png" width="17"
                     height="17" /></a></li>
                           
            <li> <a href="http://ca.linkedin.com/in/grantgeddes/" target = "_blank">
 <img src="https://www.ixactcontact.com/iXactAccountContent/CnttzVNt/Images/linkedin.png" width="17"
                     height="17" /></a></li> 
                </ul>
          <div id="logo"><img src="https://ggeddes.com/_media/BottomBannerCIRGeddesGroup.jpg"></div>  
        </div>
</div>
<!-- Insert your content here -->
</body>
</html>
geddeca
  • 119
  • 1
  • 1
  • 9
  • 1
    HTML Emails need to be built with ``s, and table cells can use percentage size values so you can make the tables kind of responsive but HTML email clients are all varied and mostly quite backwards in their approach to HTML, so try and keep it simple to make it workable with as many clients as possible
     – Martin Oct 15 '20 at 18:59
  • 1
    Do not use ` – Martin Oct 15 '20 at 19:00
  • Unfortunately with HTML emails, for maximum compatibility with mass providers, you need to code like it's 2004. – Martin Oct 15 '20 at 19:01
  • Thank you Martin, I do have other email templates that I have created with tables but there are so many nested tables that I get confused trying to re-use with new content. Plus the text isn't readable on small devices as it just shrinks the whole email. – geddeca Oct 15 '20 at 19:13
  • Actualy in email you can use `style` tags but you need to really cut them the whole time you want to specify media query different. So you can use `em` To make them readable for any device – MaxiGui Oct 15 '20 at 19:19
  • besides what have been said already. To anwser your original question: you have css line `body {max-width: 650px}`that already alone means, that it is not responsive.As you declare to many fixed width, it cant be responsive. responsive means, that it will adapet to the screen size. With a very limited max width, it wont. – tacoshy Oct 15 '20 at 19:51
  • @MaxiGui I am sorry, what do you mean by "ut you need to really cut them the whole time you want to specify media query different. "? Also, why " em". I thought em was just sort of like or something to add style to text. – geddeca Oct 15 '20 at 20:01
  • @tacoshy, I see what you mean. Technically I did limit the upper size. I was trying to stop gmail from displaying 100% across my screen. Like I said, I have a 2 foot wide monitor. my pictures are only 650 px wide. Why does it not stay in the body size but go huge. Actually, do I need to put a min and max in? – geddeca Oct 15 '20 at 20:04
  • Does this answer your question? [Best Practices & Considerations when writing HTML Emails](https://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails) – Martin Oct 15 '20 at 20:07
  • Because gmail is very selective about what styles and CSS rules it applies. – Martin Oct 15 '20 at 20:07
  • 1
    @MaxiGui I would state that ` – Martin Oct 15 '20 at 20:08
  • 1
    Here is an example of `style` from a emailer I use. https://codepen.io/Maxigui/pen/ExyPBPe it is very complex, but I think that it cover planty of css rules. Obviously their html is complex `table` in `table`. But you can set planty of css rules already in these tag. But obviously if you want more specific it had to be inline – MaxiGui Oct 15 '20 at 20:11
  • 1
    @Martin, Oh wow, I will read it. Thanks – geddeca Oct 15 '20 at 20:12
  • @MaxiGui , It looks complicated. May be too deep for my knowledge. I did copy it though for future. I don't have time to days/weeks/months/years becoming proficient. Got other job – geddeca Oct 15 '20 at 20:16
  • Sure, specialy that you dont have the html, the goal is just to show the whole css rules you can easily implement already in this tag, without using inline css – MaxiGui Oct 15 '20 at 20:18
  • Thanks. I have just started reading about @media. Not even sure but it also seems to be a way to code for different sizes – geddeca Oct 15 '20 at 20:28
  • It is but be aware that some mail readers dont support them – MaxiGui Oct 15 '20 at 20:29
  • ok, so You are saying, Same problem if I use @media. Not all support.... – geddeca Oct 15 '20 at 21:31
  • With all of this information I was able to get both gmail and outlook to size images correctly and it works on my mobile device. – geddeca Nov 05 '20 at 01:06

0 Answers0