How to custom responsive text module

IVergara
Member

I have a full Hubspot template made by the drag and drop modules already provided.

But I'm trying to create a responsive text module that can work as my Newsletter Title.  

 

here's the expected behavior:

image.png

 

Email preview: https://newsletter.thegamingsociety.com/new-design-test-email?hs_preview=WNJnfayH-55154993979

 

here's my code 

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<style type="text/css">
.responsiveTitle {
font-size: {{ module.font_size }}px !important;
text-align: center;
line-height: 175%;
}
@media (max-width: 350px) {
.responsiveTitle {
font-size: {{ module.font_size_responsive }}px !important;
}
}
</style>
</head>
<body>
<h2 class="responsiveTitle">
<span style="font-family: Helvetica, Arial, sans-serif; font-weight: normal;">
{{ module.text_before_bold }}
</span>
<em style="font-family: Merriweather, Tahoma, sans-serif; font-weight: 600;">
{{ module.text_bold }}
</em>
<span style="font-family: Lato, Tahoma, sans-serif; font-weight: normal;">
{{ module.text_after_bold }}
</span>
</h2>
</body>
</html>
 
 

 

 

0 Upvotes
3 Replies 3
IVergara
Member

Hello!  @DanielSanchez @Kevin-C @Anton   I saw in another post that you guys were an expert on responsive emails and I would like to ask you for your help,

 

sorry if this is a cheeky thing and thanks for your time

0 Upvotes
Indra
Top Contributor | Diamond Partner

@IVergara,

 

Email client do not support a range of size formats, but vw unit size would be create. But since the support is bad, I recommand setting up a fallback.

 

You could also combine the vw unit with min, max or clamp. For more info about it check: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()#examples

 

Since outlook is one of the most populair email client I recommand checking unit sizes of css styling at caniemail before using it.

 

In my opinion the easiest way to create a great responsive looking header is setting up an image with text. This will automatically be resonsive since it will resize to the clients width.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution
0 Upvotes
Teun
Guide | Diamond Partner

Hi  @IVergara , I see that in the preview the class "responsiveText" is not set in the H2. Could you add that so we can do some testing?
Two things that should help:

 

  1. Add the hs-inline-css ID to the <style> tag, this should help with cross client compatibility.
  2. Increase your media query to 375px or higher. Currently, your query will skip some mobile devices.
Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes