Hi. When I send the html email using Make to the recipient the output doesn’t apply other stylings I put inside the html email. See the attached images below:
Is there someone who can assist me? I’ll gladly appreciate it!
Please paste the HTML here, within code blocks
These are the two ways to format text so that it won’t be modified by the forum:
Method 1: Type code block manually
Add three backticks ``` before and after the content/bundle, like this:
```
content goes here
```
Method 2. Highlight and click the format button in the editor
Hope this helps! Let me know if there are any further questions or issues.
— @samliew
P.S.: Investing some effort into the Make Academy will save you lots of time and frustration using Make.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title>Verify Your Email</title>
<style>
body {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 400;
font-style: normal;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.button:hover {
background-color: #0056b3;
}
.content p {
text-align:left;
line-height: 24px;
font-size: 18px;
}
.footer a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="email-container" style="background: url('https://drive.usercontent.google.com/download?id=11o87vuoUt44-5Y_WlKwMGh97pJuBztMC') lightgray 50% / cover no-repeat;position: relative;max-width: 706px;margin: 50px auto;background: #ffffff !important;padding: 88px 104px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;font-family: 'IBM Plex Sans', sans-serif;font-weight: 400;">
<div class="logo" style="text-align: center;
margin-bottom: 24px;">
<img src="https://drive.usercontent.google.com/download?id=1hq0sZcBuodQ_lAhswtzTOpv2vyYu0lfi" alt="Celerity Logo" style="max-width: 120px;">
</div>
<div class="header" style="text-align: center;font-size: 22px;font-weight: 600;color: #000000;margin-bottom: 24px;">
Verify Your Email Address
</div>
<div class="content" style="text-align: center;color: #000000;margin-bottom: 24px;">
<p>Welcome to the future of storytelling! You're just one step away from joining our exclusive early access community for ReViz, launching March 2025.</p>
<p>Please verify your email address to secure your early access spot and be among the first to experience ReViz:</p>
<a href="https://hook.us2.make.com/yj3e5r95a3vfzcw4im8mblts5b7xxqn3?email=" class="button" style="display: inline-block;background-color: #4151E5;color: #ffffff !important;text-decoration: none;padding: 8px 20px;border-radius: 5px;font-size: 18px;font-weight: 700;line-height: 30x;margin: 12px 0px;">Verify Email Address</a>
<p>By verifying your email, you agree to our <a href="" target="_blank">Privacy Policy</a>. Our commitment is to protect your data while building the ultimate storytelling playground together. Your verification link will expire in 24 hours.</p>
<p>Your verification link will expire in 24 hours.</p>
</div>
<div class="footer-line" style="height: 1px;width: 706px;background: #000000;opacity: 0.5;margin-bottom: 24px;"></div>
<div class="footer" style="font-size: 18px;color: #5F6368;">
<p>If you didn't sign up for ReViz early access, you can safely ignore this email.</p>
<p>Questions? Contact us at <a href="" target="_blank">support@celerity.studio.</a></p>
</div>
</div>
</body>
</html>
This is because you have specified a background twice. The later one overrode your earlier background.
Here is the error in bold:
background: url('https://drive.usercontent.google.com/download?id=11o87vuoUt44-5Y_WlKwMGh97pJuBztMC') lightgray 50% / cover no-repeat;position: relative;max-width: 706px;margin: 50px auto; background: #ffffff !important; padding: 88px 104px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;font-family: 'IBM Plex Sans', sans-serif;font-weight: 400;
Hope this helps! Let me know if there are any further questions or issues.
— @samliew
P.S.: Investing some effort into the Make Academy will save you lots of time and frustration using Make.
Thank you so much! It works now!
No problem, glad I could help!
Here are some useful links and guides you can use to learn more on how to use the Make platform, apps, and app modules. I found these useful when I was learning Make, and hope they might benefit you too —
parseDate | tokens for formatDateHope this helps! Let me know if there are any further questions or issues.
— @samliew
P.S.: Investing some effort into the Make Academy will save you lots of time and frustration using Make.