3
私は練習するためのテストサイトを作っていますPractice Page。私は電子メールの基盤フレームワークにロゴと写真を設定しました。このサイトは今すぐ対応しています。 racoonの写真は、上下に40pxのパディングがあります。私が596pxの下に降りると、パディングを0pxに設定しようとしてもまだパディングがあります。下の画像に余白をつける
私が596ピクセルに達すると、0ピクセルになるようにパディングする必要がありますが、なぜ今は動作しませんか？私は!importantをmedia only screenに設定して作業させることができます。しかし、それは悪いコーディングの振る舞いですよね？
フレームワークにはたくさんのCSSがあります。したがって、私はfiddle
デスクトップCSS
.img-position {
padding:40px 0px 40px 0px;
}
モバイルCSS
@media only screen and (max-width: 596px) {
.img-position {
padding:0px 0px 0px 0px;
}
}
HTML
<body>
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!-- Logo Start -->
<table align="center" class="wrapper header float-center background-color__white">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container" style="background-color:transparent">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="img-headline">
<center>
<a href="http://smalldanishhotels.dk/"><img src="http://www.fontmagic.com/files/animal-silence.gif" alt="TestPicture" align="center" class="float-center" width="250" height="80"></a>
</center>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Logo End -->
<!-- Top Picture Start -->
<table class="row background-color__blue">
<tr>
<td class="center img-position" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<img width="580" height="300" src="http://animalhumanhealth.com/wp-content/uploads/2016/07/racoon1.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->
<!-- Row 1 End -->
<!-- Email Button End -->
</center>
</td>
</tr>
</table>
</body>