Как мне заставить href правильно отформатировать в отзывчивом классе? - PullRequest
Новая
       8

Как мне заставить href правильно отформатировать в отзывчивом классе?

0 голосов
/ 21 мая 2019

Я знаю, что упускаю что-то простое, но работаю над отзывчивым письмом и не могу получить ссылки для правильного форматирования с помощью css

Я пытался создать класс и назначить его, тоже самое. Пробные промежутки и т. Д. Я никогда не был слишком ярким с CSS. Спасибо.

Я немного пробовал разные типы, которые мог бы найти, и, вероятно, просто схожу с ума, так как я не пишу в основном и работаю над адаптивным макетом электронной почты. 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

    <style type="text/css">
    @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }


        .templateColumnContainer{
            display:block !important;
            width:100% !important;
        }

        .columnImage{
            height:auto !important;
            max-width:480px !important;
            width:100% !important;
        }

        .leftColumnContent{
            font-size:16px !important;
            line-height:125% !important;

        }

        .rightColumnContent{
            font-size:16px !important;
            line-height:125% !important;

        }

         .rightColumnContent  .leftColumnContent a {
            font-family: Lato, Arial, Helvetica, sans-serif;
            text-decoration: none;

        }
        img.header {
          width: 100%;
          height: auto;
            }
    }
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="800" id="templateColumns">

    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 1-->
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">
                        <img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg"  width="380" style="max-width:380px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                         <a href="#">Sengled Pulse LED Smart Bulb with JBL Bluetooth Speaker (2-Pack)</a>

                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 2 -->
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <a href="#" >Apple iPad 3 Retina Bundle with Case and Screen Protector (32GB)</a>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
<body>
</body>
</html>

1 Ответ

1 голос
/ 21 мая 2019

Вам понадобится правило, которое выглядит следующим образом: 

a {
 color: preferred-link-color;
}

Это повлияет на все <a> элементы в вашем документе.

И, так как это электронное письмо, вы можете захотеть встроитьстили для загрузки!Я считаю, что клиенты gmail / Android удаляют теги <style>.Для этого есть услуги, поэтому вы можете сделать это эффективно.

...