WordPressテーマSANGOの質問

PC表示ではcard2タイプの関連記事、スマホ表示では横長タイプの関連記事を表示させたい

ねね

2019/05/15

こんにちは。
SANGOを1年以上使わせて頂いております。

色々調べたのですが分からなかったので質問させてください。

固定ページ(サイドバーあり）をホームページに設定しているのですが、
現状、関連記事がPC表示だとcard2タイプの関連記事、これをスマホから見ると、cardタイプの関連記事になってしまいます。

スマホではすっきり表示させたいので、cardタイプの関連記事ではなく、横長タイプの関連記事になるようにしたいのですが、どのようにしたら良いのでしょうか？

ご教授のほどよろしくお願いいたします。

SANGOで固定ページをホーム固定する方法まとめ

コメントへの回答

サルワカくん

2019/05/15

お世話になっております。
なるほど、たしかにそのようにしたい場合もありますよね。

以下のCSSを子テーマのstyle.cssもしくは外観→カスタマイズ→追加CSSに貼り付けることで、card2のショートコードをスマホでも横長で表示することができます。

/* card2: スマホ表示でも横長のカード表示 */
@media only screen and (max-width: 480px) {
  .longc_linkto {
    display: table;
    padding: 10px; /*ふちの余白*/
  }
  .longc_img, .longc_content {
    display: table-cell;
    vertical-align: top;
  }
  .longc_img {
    width: 120px; /*画像の大きさ*/
  }
  .longc_img img {
    padding: 0;
  }
  .c_linkto .c_linkto_text {
    padding: 0 0 0 10px; /*画像と文字の隙間*/
    font-size: 15px; /*フォントサイズ*/
    line-height: 1.5; /*行間*/
  }
}

↑ざっくりとコメントを書いたので、お好みで調整していただければと思います。
追加後はキャッシュの削除をしてからご確認ください。