Drag and Drop Email Template is not responsive by default. I need urgent help.

SOLVE
MaisamAbbas
Member

Hi,

I have developed an email template and have used some custom css in <head> <style> section, everything is working for desktop version, but on mobile devices, the template is not getting resposive as per device widths. Please help me find, what I'm missing that prevents its media queries not workable in mobile devices (tablet/iphone).

 

Here is my extra css code in <head> section.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">

<style type="text/css" data-hse-inline-css="true">

@media screen and (max-width: 768px)  {
   ul { right:-100px !important;} 
    
  }
body {
    font-family: 'Montserrat', sans-serif;
  }
.main-logo .hs-image-widget  {
    max-height: 100px !important;
    max-width: 174px !important;
    padding: 20px 20px !important;
  }
 
ul {    display: flex;
    padding: 30px 0;
    font-size: 22px;
    opacity: 0.7;
    position: absolute;
    right:14%;
  }  
ul li { list-style: none; padding-left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight:600;
  color:orange !important;
  }
ul li a{
  text-decoration: none;
    color: #fff;
    position: relative;
    bottom: 15px;
  }
ul li a:hover{
  color:#33C7FF !important;
  }
  
.main-hero { 
  background-image:url("https://cdn2.hubspot.net/hubfs/6015579/gravity-explore-page/green-leaves.jpg");
  background-size:cover; 
  width:100%;
  height:550px;
  } 
  .main-hero .center-content { padding:150px 0; color:#fff;} 
  .main-hero .center-content .top-heading { font-size:30px; font-weight:600;font-family: 'Montserrat', sans-serif;margin-bottom:20px; }  
  .main-hero .center-content h1{ font-size:60px; font-weight:600;font-family: 'Montserrat', sans-serif;padding-bottom:20px; }
   .main-hero .center-content .below-heading { font-size:30px; font-weight:500;font-family: 'Montserrat', sans-serif;padding-bottom:30px;line-height:30px; } 
  .main-hero .center-content a
  {
   -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    border: 0 solid #101010;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    padding: 15px 50px 15px 50px;
    text-decoration: none;
    background-color: rgb(51, 54, 58);
/*     -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px; */
  }
  .main-hero .center-content a:hover
  {
    background-color: #79949D !important;
  }
#templateTable {
width:80%;
}
#contentTableInner{
   width:100%;  
  }
#contentTableOuter {
padding:0;
}
  
.text-with-image { padding:100px 20px !important; }
.text-with-image .text-left { width:70%; }
.text-with-image .text-left h2 { font-size:25px;font-weight:500;opacity: 0.7; font-family: 'Montserrat', sans-serif;}
.text-with-image .text-left p { font-size:16px;opacity:0.7;font-family: 'Montserrat', sans-serif;padding:30px 0; }
.text-with-image .text-left a { font-size:16px;color:green;text-decoration:none;font-family: 'Montserrat', sans-serif; }
.text-with-image .hs-image-widget{ width:100% !important; }
 
.portfolio-projects a {
  text-decoration:none;
  color:#A9A9A9;
  }
  .quote-section
 {
      padding: 100px 20px !important; 
  }
.quote-section .customer-name {
    opacity: 0.6;
    position: relative;
    left: 30px;
    top: 150px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
.quote-section .vertical-line {
    empty-cells: hide;
    width: 300px;
    border: 1px solid lightgrey;
    height: 0em;
    transform: rotate(90deg);
    background-color: lightgrey;
    position: relative;
    left: 90px;
    top: 160px;
}
  .quote-section .new-quote
  {
    width: 70%;
    float: right;
  }
.quote-section .new-quote .icon {
font-size:100px;
}
.quote-section .new-quote .quote-text{
font-size: 30px;
    opacity: 0.5;
    line-height: 40px;
    margin-bottom: 40px;
    width: 80%;
}
.quote-section .new-quote .author{
font-size: 15px;
    opacity: 0.5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  
.portfolio-projects .projects-list h2 {
font-family: 'Montserrat', sans-serif;
  font-weight:600;
font-size:30px;
  position: relative;
    left: 5%;
}

.portfolio-projects .projects-list .categories ul
  {
    font-family: 'Montserrat', sans-serif;
    font-weight:600;
    position: relative;
    right: 5%;
    float: right;
    top: -100px;}

 .hse-image-wrapper img{
   display: block;
    width: 100% !important;
    height: auto;
  }
  #hs_cos_wrapper_module_15695262454931599_ h2 {
    font-size:30px;
    padding-left: 5%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  
  /* social icons */
  .fa {
  padding: 10px;
  font-size: 10px;
  width: 10px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}
.fa:hover {
    opacity: 0.7;
}


.fa-twitter {
  background: #5D6066;
  color: white;
}

.fa-facebook {
  background: #5D6066;
  color: white;
}
.fa-pinterest {
  background: #5D6066;
  color: white;
}

.fa-google {
  background: #5D6066;
  color: white;
}
/* social icons end */
  .email-footer-logo .hs-image-widget  {
    max-height: 100px !important;
    max-width: 150px !important;
    padding: 10px 10px;
  }
  
  #hs_cos_wrapper_module_15695262037121258 {
    position: relative;
    float: right;
    top: 20px;
    right: 30px;
  }
</style>

and here is my email template preview link.

https://app.hubspot.com/design-previewer/6015579/templates/15042778214

 

Please help me out, how can i make it responsive.

Thanks in advance.

CSS
0 Upvotes
1 Accepted solution

Accepted Solutions
MaisamAbbas
Solution
Member

Well,

Finally i found the solution after long debuggin and analysis.

Actually, I had used (insert > table ) in footer's (Richtext Editor), that was causing 100% width by default. In email templates, all drap and drop components are based on <table> in behind, thus hard to manage sometimes. I used <div> insead of <table> in last section of the email's drag and drop Richtext editor, and added some custom CSS in <head><style> cusome css here </style></head>. Thus it resolved my problem. thanks 🙂 

View solution in original post

1 Reply 1
MaisamAbbas
Solution
Member

Well,

Finally i found the solution after long debuggin and analysis.

Actually, I had used (insert > table ) in footer's (Richtext Editor), that was causing 100% width by default. In email templates, all drap and drop components are based on <table> in behind, thus hard to manage sometimes. I used <div> insead of <table> in last section of the email's drag and drop Richtext editor, and added some custom CSS in <head><style> cusome css here </style></head>. Thus it resolved my problem. thanks 🙂 

View solution in original post