CSS-стиль Gmail

У меня проблемы с CSS в Gmail. Моя электронная почта в формате HTML отзывчива и отлично работает на iPhone, но при отправке в Gmail она отображает «mobile_toolbar» и «full_toolbar». Мне нужно избавиться от мобильной панели инструментов, чтобы электронная почта правильно форматировалась для Gmail Desktop.

Я уже пробовал использовать display:none !important, но он не работает.

Спасибо!

CSS:

<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:Arial}
table {border-collapse: collapse;}
p {font-family: Arial, serif;}
a {font-family: Arial, serif;}

@media only screen and (max-width: 640px)  {
                body[yahoo] .deviceWidth {width:440px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
                                    #full_toolbar {display:none !important;}



                #mobile_toolbar {display:block; background:white;}

                #mobile_toolbar a {text-decoration:none;}
        }

@media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:280px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
        }

            @media screen and (min-width: 641px) and (max-width: 1920px) {
                *[id=mobile_toolbar] {

display:none!important;
overflow:hidden!important;

 }

        }

HTML:

                    <div id="full_toolbar"><img usemap="#toolbar" class="deviceWidth" src="images/main_toolbar.jpg" alt="" style="display: block; border-radius: 4px;" border="0">


                <div id="mobile_toolbar" >

                <a href="#"><div style="margin-bottom: 5px; width:100%; height:100%; color:black; background:#a4a4a4; font-weight: bold;">New Inventory</div>
                <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Used Inventory</div>
                    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Services</div>
                        <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Directions</div>
                            <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Contact</div>
<a href="#"><img src="images/twitter.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/facebook.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="#"><img src="images/youtube.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/google.jpg"></a>

                </div>

gmail html css email html-email
person 626    schedule 24.10.2013    source источник

Ответы (6)


arrow_upward
5
arrow_downward

Gmail принимает только встроенные стили. Никаких тегов заголовка, никаких тегов стиля вообще, только встроенные. Это означает отсутствие медиа-запросов.

Это должно дать вам ответ, который вам нужен. :)

Это тоже очень помогает: http://www.campaignmonitor.com/css/

person R Lacorne    schedule 24.10.2013

arrow_upward
1
arrow_downward

Чтобы опираться на предложенный ответ, в дополнение к встроенному CSS вы столкнетесь с проблемами, используя display в мобильных приложениях Gmail.

Добавление объявления !important также помогает, но может вызвать головную боль в Outlook, который будет игнорировать это правило.

Вы можете попробовать дополнительные методы для большей совместимости вместе со встроенным CSS. В приведенном ниже примере панель инструментов будет скрыта по умолчанию, а для почтовых клиентов, поддерживающих медиа-запросы, вы сможете снова включить их, обратив их вспять.

<div id="full_toolbar style="width:0 !important; overflow:hidden !important; display:none !important;">

Этот вопрос изначально касался той же идеи.

person jsuissa    schedule 25.10.2013

arrow_upward
0
arrow_downward

Вы можете легко сделать все CSS встроенными с помощью инструмента встроенного CSS. Но, как сказала jsuissa, display:none не работает на gmail, это будет показано.

person Bidstrup    schedule 13.11.2013

arrow_upward
0
arrow_downward

Gmail не будет учитывать display:none. Вы можете обойти эту проблему, объявив display:none!important встроенным в элемент, но это также довольно бесполезно, потому что вы никогда не сможете перезаписать его.

Чтобы скрыть элемент в электронном письме в формате HTML и заставить его работать в Gmail, вам нужно обнулить его и настроить размер в CSS (что Gmail проигнорирует).

Это работает с отдельными таблицами или вложенными таблицами. Вы должны написать весь код внутри без каких-либо встроенных объявленных размеров или позиционирования, кроме float:left.. Если вам нужно установить размеры для чего-либо, сделайте это в таблице стилей вверху, на что Gmail не обратит внимания. Это включает в себя размеры на изображениях, отступы, поля, размер шрифта, высоту строки, границу, плавание, выравнивание текста и т. д. все, что ссылается на размер или размещение.

Вот так:

<style>
@media only screen and (max-width: 480px) { 
*[class~=show_on_mobile] {
    display : block !important;
    width : auto !important;
    max-height: inherit !important;
    overflow : visible !important;
    float : none !important;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
    <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
    </td>
</tr>
<!--<![endif]-->
</table>

Кроме того, добавленный условный комментарий относится к Outlook 07.

person davidcondrey    schedule 07.01.2014

arrow_upward
0
arrow_downward

"Gmail принимает только встроенные стили. Никаких тегов заголовков, никаких стилевых тегов вообще, только встроенные" совершенно неверно. Поскольку Gmail, кажется, принимает стили основных элементов, например:

p{
text-align:right;
margin:10px;
}

И вы можете поместить его в тег стиля в заголовке письма или использовать встроенный стиль. Gmail принимает радиус границы и другие простые стили. Вы можете использовать CD DATA и html-комментарии в теге стиля следующим образом:

<style>
<!--
<![CDATA[
p{
    text-align:right;
    border:1px solid #ccc;
    margin:10px;
    border-radius:10px;
    margin:10px;

}
]]>
-->
</style>
person Pïetre    schedule 28.05.2014

arrow_upward
-1
arrow_downward

Хотя это означает больше работы для меня, это хорошо знать.

В моем случае у меня были "спейсеры", вызываемые следующим образом:

класс = "распорка"

Итак, я думаю, теперь я буду использовать это вместо этого:

style="display: блокировать !важно; очистить: оба !важно;"

person Michaël Lessard    schedule 26.11.2014