HTML-центр электронной почты для мобильных стилей не работает на div - PullRequest
Новая
       27

HTML-центр электронной почты для мобильных стилей не работает на div

0 голосов
/ 15 апреля 2019

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

У меня есть медиазапросы, включенные в CSS для центрирования контента на мобильных устройствах, но они игнорируются во втором div. Не уверен, что у меня есть стили медиазапроса в нужных местах кода. Медиа-запросы и код div включены для справки. 

/*Responsive screens*/
@media screen and (max-width: 500px) {
.stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } /*Forces table cells into full-width rows*/
.stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; } /* And center justify these ones. */
.center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; } /*Generic utility class for centering. Useful for images, buttons, and nested tables*/
table.center-on-narrow { display: inline-block !important; }
.email-container p { font-size: 17px !important; } /*Adjusts typography on small screens to improve readability*/
.middle-article-mobile-pt { padding-top: 60px !important; }
.middle-article-mobile-pb { padding-bottom: 60px !important; }
}
		<tr>
			<td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%"><!--[if mso]>
                        <table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
                        <tr>
                        <td valign="top" width="500" style="width: 500;">
                        <![endif]-->
			<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
				<tbody>
					<tr style="padding:0;margin:0;">
						<td align="center" style="font-size:0; padding: 0;" valign="top" class=""><!--[if mso]>
                                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
                                    <tr>
                                    <td valign="top" width="200" style="width: 200px;">
                                    <![endif]-->
						<div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
						<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
							<tbody>
								<tr>
									<td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
								</tr>
							</tbody>
						</table>
						</div>
						<!--[if mso]>
                                    </td>
                                    <td valign="top" width="300" style="width: 300px;">
                                    <![endif]-->

						<div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
						<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
							<tbody>
								<tr>
									<td class="center-on-narrow" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
									<p class="body-h1" style="margin:0;">Headline</p>

									<p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
									Title title title title</a></p>

									<p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
									<!-- Button : BEGIN -->

									<table align="left" border="0" cellpadding="0" cellspacing="0">
										<tbody>
											<tr>
												<td>
												<table border="0" cellpadding="0" cellspacing="0">
													<tbody>
														<tr>
															<td align="left" bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]>&nbsp;<![endif]-->Read the Article <!--[if mso]>&nbsp;<![endif]--></a></td>
														</tr>
													</tbody>
												</table>
												</td>
											</tr>
										</tbody>
									</table>
									<!-- Button : END --></td>
								</tr>
							</tbody>
						</table>
						</div>
						<!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]--></td>
					</tr>
				</tbody>
			</table>
			<!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]--></td>
		</tr>

Ожидал, что стили CSS .center-on-narrow и .stack-column сосредоточат содержимое div на узком, но во втором div это будет игнорироваться.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

Я понял это! Добавил еще несколько мобильных стилей и подправил код вокруг кнопки CTA. 

        /*Responsive screens*/
        @media screen and (max-width: 500px) {
            .stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } 
            .stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; }
            .center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; }
            table.center-on-narrow { display: inline-block !important; }
            .email-container p { font-size: 17px !important; }
            .middle-article-mobile-pt { padding-top: 60px !important; }
            .middle-article-mobile-pb { padding-bottom: 60px !important; }
            .text-right-mobile { padding: 0px !important; }
            .body-copy, .body-copy-2, .body-h1, .body-h2, .light-blue-button, .orange-button, .mobile-center { text-align:center !important; }
        }

        <tr>
            <td dir="ltr" height="100%" style="padding: 30px 50px; background-color: #ffffff;" valign="top" width="100%" ><!--[if mso]>
                        <table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
                        <tr>
                        <td valign="top" width="500" style="width: 500;">
                        <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px; padding:0; margin:0;" width="100%">
                <tbody>
                    <tr style="padding:0;margin:0;">
                        <td align="center" style="font-size:0; padding: 0 0 60px 0;border-bottom:1px solid #ebebeb;" valign="top" class=""><!--[if mso]>
                                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="500" style="width: 500;">
                                    <tr>
                                    <td valign="top" width="200" style="width: 200px;">
                                    <![endif]-->
                        <div class="stack-column" style="display:inline-block; margin: 0; max-width: 200px; vertical-align:top; width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                            <tbody>
                                <tr>
                                    <td dir="ltr" style="padding: 0 10px 0 10px;" class=""><img alt="alt_text" border="0" class="center-on-narrow" height="" src="http://go.pardot.com/l/190862/2019-04-09/h9rldk/190862/77786/template_testing_200px_placeholder.png" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" width="200"></td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                        <!--[if mso]>
                                    </td>
                                    <td valign="top" width="300" style="width: 300px;">
                                    <![endif]-->

                        <div class="stack-column" style="display:inline-block; margin: 0; max-width:300px; vertical-align:top;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                            <tbody>
                                <tr>
                                    <td class="center-on-narrow text-right-mobile" dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 0 0 20px; text-align: left;">
                                    <p class="body-h1" style="margin:0;">Headline</p>

                                    <p class="body-h2" style="margin:0;"><a href="##" style="text-decoration:underline;">Author, CPA<br>
                                    Title title title title</a></p>

                                    <p class="body-copy" style="margin: 15px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                                    <!-- Button : BEGIN -->

                                    <table border="0" cellpadding="0" cellspacing="0" >
                                        <tbody>
                                            <tr>
                                                <td>
                                                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                    <tbody>
                                                        <tr>
                                                            <td bgcolor="#05090c7" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);" class=""><a class="light-blue-button" href="##"><!--[if mso]>&nbsp;<![endif]-->Read the Article <!--[if mso]>&nbsp;<![endif]--></a></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- Button : END --></td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                        <!--[if mso]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]--></td>
                    </tr>
                </tbody>
            </table>
            <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]--></td>
        </tr>
0 голосов
/ 15 апреля 2019

Попробуйте использовать центральные теги. Это будет центрировать контент, заключенный в теги. Для примера посетите Пример центра тегов .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...