WordPressテーマSANGOの質問

アバター
すたりく

カエレバで「画像中」(320px)でコードを作成しておりますが、小さい画像サイズで表示されてしまいます。横幅320pxを上限に画像を配置し、スマホなどの画面サイズが小さいデバイスでは、商品タイトルなどは回り込んで画像下に配置するには、どのようにカスタマイズをすれば良いでしょうか?
(他サイトで紹介しているCSSコードをまるまる貼り付けても、SANGOのCSSと混ざってしまいうまくいきません。そのため、SANGOのCSSをベースにカスタマイズしたいです)

カエレバ/ヨメレバの広告を貼る
カエレバ/ヨメレバで広告を貼る
コメントへの回答
サルワカくん
サルワカくん
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

サルワカくん
すいません・・・自己解決できました