我创建了响应式电子邮件,它可以工作,但问题出在 Thunderbird 上。当我进入断点时,我的所有列看起来都是 100% 的宽度,但应该是 50%。我添加了一些屏幕视图和我的代码。请帮忙 ...
屏幕 1 - 正确 http://elskiba.pl/mobile-view.jpg 屏幕 -1 Thunderbird http://elskiba.pl/html-mail-issue.jpg
<container
style="border-bottom:1px solid #ffcc00;padding:0 2px;background:#fff;"
>
<row class="collapse">
<columns small="12" large="6">
<row>
<!-- column 1 -->
<columns
small="4"
style="padding-top:14px; padding-bottom:20px; padding-left:5px;padding-right:0"
>
<img
width="106"
src="{{ faceurl }}"
alt="portret"
style="width:106px;max-width:106px"
class="float-center"
/>
</columns>
<!-- column 1-- end -->
<!-- column 2 -->
<columns
small="8"
style="padding-top:14px; padding-bottom:20px"
>
<row>
<columns small="2" large="2" align="center">
<a
href="{{ linkedinlink }}"
style="margin-right:8px;display:block"
><img
width="25"
height="25"
src="https://chop-chop.org/app/uploads/2019/02/linkedin_yellow_icon.jpg"
alt="linkedin"
class="float-right"
/></a>
</columns>
<columns small="10" large="10">
<h1 style="line-height: 1">
<a href="{{ linkedinlink }}"
><strong>{{ name }}</strong></a
>
</h1>
<p style="line-height: 1">{{ position }}</p>
</columns>
</row>
<spacer size="18"></spacer>
<row>
<columns small="2" large="2"></columns>
<columns small="10" large="10">
<p style="color:#000">
<strong
><a
href="{{ contact }}"
style="text-decoration:none;"
><span
style="color:#000 !important;text-decoration:none !important"
>{{ contact }}</span
></a
></strong
>
</p>
<p style="color:#000">
<a href="http://chop-chop.org"
><strong
><span
style="color:#000;text-decoration:none"
>chop-chop.org</span
></strong
></a
>
</p>
<p style="color:#000">
<a href="http://chop-chop.org/blog"
><span
style="color:#000;text-decoration:none"
>chop-chop.org/blog</span
></a
>
</p>
</columns>
</row>
</columns>
<!-- column 2-- end -->
</row>
</columns>
<columns small="12" large="6">
<row>
<columns
small="4"
large="4"
style="padding-top:14px; padding-bottom:20px"
>
<a href="http://chop-chop.org" style="display:block">
<img
width="61"
height="71"
src="{{ companylogo }}"
alt="company logo"
class="float-center"
/>
</a>
</columns>
<!-- column 4 -->
<columns
small="8"
large="8"
style="padding-top:14px; padding-bottom:20px"
>
<row>
<columns small="2" large="0"></columns>
<columns small="10" large="12">
<h2><strong>Chop-Chop Sp.z.o.o.</strong></h2>
<p>
<span style="color:#000;text-decoration:none"
>ul Szewska 3a</span
>
</p>
<p style="color:#000">
<span style="color:#000;text-decoration:none"
>50-053 Wrocław PL
</span>
</p>
</columns>
</row>
<spacer size="18"></spacer>
<row>
<columns small="2" large="0" valign="bottom"></columns>
<columns small="10" large="12" valign="bottom">
<a
href="https://www.linkedin.com/company/chop-chop-org"
><img
width="25"
height="25"
src="https://chop-chop.org/app/uploads/2019/02/linkedin_icon.jpg"
alt="linkedin"
style="display:inline-block;margin-right:4px;width:25px;height:25px"
/></a>
<a href="https://www.instagram.com/chopchopers/"
><img
width="25"
height="25"
src="https://chop-chop.org/app/uploads/2019/02/instagram_icon.jpg"
alt="instagram"
style="display:inline-block;margin-right:4px;width:25px;height:25px"
/></a>
<a href="https://www.facebook.com/chopchoporg"
><img
width="25"
height="25"
src="https://chop-chop.org/app/uploads/2019/02/facebook_icon.jpg"
alt="facebook"
style="display:inline-block;margin-right:4px;width:25px;height:25px"
/></a>
<a href="https://github.com/chop-chop-org"
><img
width="25"
height="25"
src="https://chop-chop.org/app/uploads/2019/02/github_icon.jpg"
alt="github"
style="display:inline-block;margin-right:4px;width:25px;height:25px"
/></a>
<a href="https://clutch.co/profile/chop-chop"
><img
width="25"
height="25"
src="https://chop-chop.org/app/uploads/2019/02/clutch_icon.jpg"
alt="clutch"
style="display:inline-block;margin-right:4px;width:25px;height:25px"
/></a>
</columns>
</row>
</columns>
<!-- column 4 end -->
</row>
</columns>
</row>
</container>