How to custom responsive text module
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:
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>
How to custom responsive text module
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:
- Add the hs-inline-css ID to the <style> tag, this should help with cross client compatibility.
- Increase your media query to 375px or higher. Currently, your query will skip some mobile devices.
How to custom responsive text module
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.
Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency
Did my post solve your question? Help the community by ☑marking it as a solution
