Не могу адаптировать письма под моб устройства ! Уже все переаробовал
1) Создавал отдельно css фаил там половину команд маил просто не хотел принимать ,
media запросы вообще ни как не хочит читать не отдельным файлом css ни в самом html через style
<style>
@media (max-width: 500px) {
.mail {
padding: 0px !important;
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.mail-message-text {
text-align: left !important;
}
.mail-title {
font-size: 1.25rem !important;
}
.mail-message-title {
font-size: 1rem !important;
}
.mail-content {
border-radius: 0 !important;
}
}
</style>
<body>
<div class="mail"
style="margin: 0px auto; max-width: 600px; background-color: #F0F0F0; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); padding: 1.5rem;">
<div class="mail-content"
style="text-align: center; margin-bottom: 2rem; margin: 2rem auto; background-color: #fff; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); padding: 2rem;">
<div class="mail-message">
<div class="mail-title"
style="text-align: center; font-size: 1.75rem; line-height: 1.1; color: #333; font-weight: 400; font-family: 'Roboto', sans-serif; margin-bottom: 1.0rem;">
Password Reset
</div>
<div class="mail-iqonImg" style="align-items: center;">
<img class="mail-iqon-img" src="https://kaubaplats.ee/images/mail/passwordreset.png"
alt="here must be image" style="width: 130px;">
</div>
<div class="mail-message-title" style="font-size: 1.2rem; color: #333; margin-bottom: 1rem;">Hello
<?= Html::encode($user->username) ?>,</div>
<div class="mail-message-text"
style="font-size: 1rem; color: #333; direction: ltr; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; line-height: 150%; text-align: justify;">
<p>
This email is to confirm that your password has been successfully reset for your account. Your
security is our priority,
and we are committed to ensuring the confidentiality of your information.
If you did not request this password reset, please contact our support team immediately at
<?= Html::encode($supportEmail) ?> or <?= Html::encode($supportPhone) ?>.
We take any unauthorized access very seriously and will investigate promptly.
</p>
</div>
<div class="mail-message-button" style="margin-top: 2rem; margin-bottom: 2rem;">
<?= Html::a('Reset password', $resetLink, ['class' => 'button', 'style' => 'padding: 10px 25px; background-color: #0099cc; color: #fff; border-radius: 3px; text-decoration: none; font-size: 1rem;']) ?>
</div>
<div class="mail-message-subtitle"
style="color: #666; direction: ltr; font-weight: 400; letter-spacing: 0; line-height: 150%;">
<p>If you didn’t request this, you can ignore this email or let us know. Your password won’t change
until</p>
you create a new password.
</div>
</div>
</div>
<div class="mail-footer" style="text-align: center; border-top: 0.0625rem solid #eaeaea; margin-top: 2rem;">
<div class="mail-footer-content">
<div class="mail-footer-address" style="font-size: 0.875rem; color: #999; margin-bottom: 1rem;">
Copyright © <?= date('Y'); ?>. Development by Alliance of Finance OÜ.
</div>
<div class="mail-footer-links">
<a class="mail-footer-contact" href="#"
style="padding: 5px 6px 0px 6px; background-color: #0099cc; margin-right: 10px; border-radius: 5px; width: 20px;"><img
src="https://kaubaplats.ee/images/mail/messengernew.png" alt=""></a>
<a class="mail-footer-contact" href="#"
style="padding: 5px 6px 0px 6px; background-color: #0099cc; margin-right: 10px; border-radius: 5px; width: 20px;"><img
src="https://kaubaplats.ee/images/mail/envelope.png" alt=""></a>
<a class="mail-footer-contact" href="#"
style="padding: 5px 6px 0px 6px; background-color: #0099cc; margin-right: 10px; border-radius: 5px; width: 20px;"><img
src="https://kaubaplats.ee/images/mail/telegram.png" alt=""></a>
</div>
</div>
</div>
</div>
</body>
Может есть у кого идеи как адаптировать письмо ?
Простой
