How to make mails responsives?
Hello, I purchased a commercial lisence for the Admin Bootstrap 5 theme (most specifically the demo 2 views) available at
I use Laravel and I have implement a fully working authentification system.
After the sign up, the user is redirected to a verify email page (I used the one in "demo2/authentication/general/verify-email.html").
In the background, the registered user receive an email to verify its email. The HTML I used for the email verification is available at "demo2/authentication/email/verify-email.html").
This verification email displays correctly on Desktop, but on tablet and mobile view the design is not responsive (there is a scroll bar and the content does not adapt to the viewport width).
Is it possible to make it responsive?
Replies (3)
Hi Sean, thank you for your answer. I tried to add a meta viewport but it seems to not work well. I have version 3.0.8 of the verify-email.html code, and this is how it renders on my mail service (Mailtrap).
- Desktop:
- Tablet:
- Mobile:
Is there anything to do besides copy/pasting the email code that is in the HTML file? Maybe some sort of HTML headers for mail clients?
Thank you in advance, best.
Anwar
Hi,
Thanks for the detailed info.
This issue is caused by a long URL that can not fit into the small-width container. Please try to use some CSS to break the long URL:
The layout itself responsive and the issue is caused by the long URL text.
Regards,
Sean
Hi,
Thank you for choosing our Keen theme.
Could you please send us a screenshot of the issue? Have you tried to check the original HTML template from it's preview URL
As per our checking this email template looks fine in a smaller device width.
Please let us know how we can reproduce this issue.
Regards,
Sean
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
