【Cocoon】フロントページで縦型カードのサムネイル画像を幅いっぱいにする方法！

cocoonで、インデックスのカードタイプ縦型を選んだ際に、サムネイル画像を幅いっぱいで表示する方法を紹介します。

といっても、、

padding:0px;

paddingを0pxで指定するだけです。

paddingとは？

念のための解説ですが、paddingとはボックス内側の余白です。
外側の余白はmarginです。

サムネイル画像を見てもらうとわかるかと思いますが、カードの内に余白が少しあって、余白に囲まれるようにサムネイルが表示されています。

なのでpaddingを0で指定しておけばとりあえず内の余白は消えます。

今使っているもの

とりあえず今使っているものを、メモ代わりに載せます。

.entry-card-wrap{
transition: all .3s ease;
margin-bottom: 1em!important;
background-color: white;
box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22);
padding:0px;
}
#main .entry-card-title {
	    color:#555;
}
.entry-card-wrap:hover{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transform: translateY(-2px);
background-color: white;
}

適当に付け足しているだけなので、ぐちゃぐちゃですね(笑)