WordPressテーマSANGOの質問

タブ切替の記事一覧をスマホでも2列表示にしたい

アバター
KN

お世話になっております。
タブ切替機能によって表示した記事一覧を、スマートフォンでも2カラムで表示させることはできますでしょうか。

お答えいただける内容でしたら、よろしくお願いいたします。

SANGOのタブ機能
SANGOトップページのタブ切替機能の設定方法まとめ
コメントへの回答
サルワカくん
サルワカくん
2018/06/21

お世話になります。以下のCSSを子テーマのstyle.cssなどに追加してみるとスマホでも2列になると思います。

@media only screen and (max-width: 480px) {
 .cardtype {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
 }
 .cardtype__article {
    width: 45.8%;
    margin: 2%;
 }
 .cardtype time {
    font-size: 11px;
 }
 .cardtype h2 {
    font-size: 13px;
    margin: 0 10px;
  }
  .cardtype__link {
    padding-bottom: 10px;
  }
  .cardtype time {
    font-size: 11px;
    margin: 6px 10px 2px;
  }
  .cat-name {
    font-size: 10px;
    top: 8px;
    left: 8px;
  }
  .newmark {
    font-size: 11px;
    height: 33px;
    width: 33px;
    line-height: 33px;
    top: 9px;
    right: 8px;
  }
}

ご確認よろしくお願いします。

アバター
ふかいくろ
2018/08/27

SANGOを使い楽しくブログをかかせていただいております。
ありがとうございます。

上記の方法を使いスマホで2列表示をしようとしていますが一番上の右の記事の部分にスペースが空いてしまいます。対応方法をお教えいただきたいです。

よろしくお願いいたします。

アバター
KN
2018/06/22

思ったとおりの2列表示になりました。とても嬉しいです。
迅速に対応していただき、ありがとうございました。

サルワカくん
サルワカくん
2018/08/28

なるほど。追加で貼り付けたCSSの

.cardtype__article {
    width: 46%;

の数字を

.cardtype__article {
    width: 45.8%;

に変えてみて頂けますか?

アバター
ふかいくろ
2018/08/28

ばっちり右上のスペースなくなりました!
こうやってサポートいただけるととても心強いです。
助かりました。ありがとうございます。

サルワカくん へ返信する

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。