2018/03/26
.cstmreba .kaerebalink-image {
width: 150px;
}
.cstmreba .kaerebalink-info {
width : calc(100% - 150px);
}
@media screen and (max-width: 500px) {
.entry-content .cstmreba .kaerebalink-image,.entry-content .cstmreba .kaerebalink-info {
display: block;
width: 100%;
}
.cstmreba .kaerebalink-image a img {
max-width: 320px;
}
.entry-content .cstmreba {
text-align: center;
}
}
上のCSSを追加してみて頂くと良いかと思います。2つある150pxの値がPC表示での画像の大きさ、320pxがスマホ表示での画像の大きさなのでお好みで調整して頂ければ。
2018/07/13
サルワカくん
初歩的なことで申し訳ないのですが、
すたりくさんと同じでスマホで見た時に商品画像を上にして、商品名などをその下部にもってきたいと思い、上記のCSSをentry-option.cssに入れてみたのですが、状況が改善されません。
entry-option.cssはFTPで子テーマに移植し編集してます。
子テーマは「PORIPU]を使用。
FTPや子テーマのカスタマイズに不慣れな初心者のため、挿入箇所がそもそも違うのかもしれませんが、ご教授いただけませんでしょうか。
2018/03/27
ありがとうございます。おかげさまでうまくできました。
2018/07/13
サルワカくん
すいません・・・自己解決できました
WordPressテーマSANGOの質問
カエレバで「画像中」(320px)でコードを作成しておりますが、小さい画像サイズで表示されてしまいます。横幅320pxを上限に画像を配置し、スマホなどの画面サイズが小さいデバイスでは、商品タイトルなどは回り込んで画像下に配置するには、どのようにカスタマイズをすれば良いでしょうか？
（他サイトで紹介しているCSSコードをまるまる貼り付けても、SANGOのCSSと混ざってしまいうまくいきません。そのため、SANGOのCSSをベースにカスタマイズしたいです）