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 https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/.
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 (6)
Use percentages for your tables and pictures instead of set widths to let them scale depending on the screen size slope 2.
Apply many designs depending on the screen size of the device using CSS media queries.
This article is so deep but i have one thing that can make you headache this game Five Nights at Freddy's, it is so deep that it can make you scared. try it!
Making emails responsive is crucial for ensuring they look great on all devices. I recommend using a mobile-first design Spectra Precision Laser HL700 Laserometer approach and employing CSS media queries to adapt layouts. Testing emails across various screen sizes helps optimize readability and user experience, making your communications more effective and engaging.
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: https://postimg.cc/XXqBM7vd
- Tablet: https://postimg.cc/zyZyRCFF
- Mobile: https://postimg.cc/MvjcTPVG
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: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
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
