CMS Development

MaisamAbbas
メンバー

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

解決

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.

0 いいね!
1件の承認済みベストアンサー
MaisamAbbas
解決策
メンバー

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

解決

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 🙂 

元の投稿で解決策を見る

1件の返信
MaisamAbbas
解決策
メンバー

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

解決

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 🙂