Word Press 「cocoon」 アピールエリアがモバイルだと表示されない時の対処法

Word Press 「cocoon」 アピールエリアがモバイルだと表示されない時の対処法

cocoonでお気に入りのアピールエリア画像を挿入しても、モバイルだと表示されないことありませんか?

cocoonは日本のテーマなのでフォーラムなどサポートがしっかりしていて検索すればいくつか答えが出できます

でも、この「いくつかの答え」が問題で、サポートがしっかりしている分答えも多く

まあ、答えが英語だったり出てこないよりは100倍はいいんですけど…

自分もいくつか試してみました、まずやったのがこれ

#appeal,
.appeal .appeal-in {
	min-height: 24vw;
}
@media screen and (min-width: 1267px) {
	#appeal,
	.appeal .appeal-in {
		min-height: 300px;
	}
}
.appeal {
	background-size: contain;
}

モバイルでも表示されましたが単純に画像が小さくなりました…

これで問題解決された方もいるようですが自分はダメでした

 

 

次はアピールエリアの高さを0にする方法

cocoon設定のアピールエリアから「高さ0」は設定できないのでこれもNG

 

 

そして最後にこれ!これを追加CSSにコピペしたら・・・

無事表示されました!

@media screen and (max-width: 768px){

  #appeal .appeal-in{

    min-height: 200px;

  }

}

 

追加CSSはWordPressの「外観」→「カスタマイズ」→「追加CSS」に書き込んでください!