WordPressテーマSANGOの質問

新着記事をPCでは縦長(大型)カード、モバイルでは横長カード表示にしたい

アバター
mochi

お世話になっております。
固定ページ(使用テンプレ:1カラム・タイトルなど出力無し)でトップを作成中で、新着記事を3つ表示させたいと思っています。
PCとモバイルでカードの表示を変更させたいので、SANGO Gutenbergの「SANGO条件」と「SANGO記事一覧」を以下のように利用しました。

SANGO条件<PCのみで表示>    :縦長(大型)カード
SANGO条件<モバイルのみで表示> :横長カード(※2列並びではない)

モバイル表示に関して、タブレットサイズでは横長カードになるものの、スマホサイズでは縦長(大型)カードで表示されてしまいます。
特にcssも未指定なので、原因が自分ではどうしても分からず…。
解決策をご教示いただけますでしょうか?

もしくは、上記以外に最適な方法がございましたら、そちらをご教示いただけますと幸いです。
よろしくお願いいたします。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2021/08/26

お世話になっております。

こちらややこしくて恐縮なのですが、
2列並びではない横長カードは、CSSによりスマートフォンの場合は大型カードとして表示されてしまいます。
ですのでスマートフォンの条件では「2列並びのスタイル」をお選びいただくか、もしくはカスタムCSS機能を使ってスマートフォンの時でも横表示になるようにCSSを調整していただく必要がありそうです。
以下のようなCSSを書けばスマートフォンの時でも横長で表示されるかと思います。


.c_linkto.longc_linkto {
max-width: 100%;
display: table;
margin-right: 20px;
}
.longc_img,
.c_linkto.longc_linkto .longc_content {
display: table-cell;
vertical-align: middle;
width: 40%;
}
.longc_content {
width: 60%;
}

よろしくお願いします。

アバター
Sakura
2021/08/27

いつもお世話になります。いつもわかりやすくご説明いただき、また使いやすいようにバージョンアップしていただき、ありがとうございます。

質問者さんと同じことでつまずき、質問検索でこちらの回答を見つけ対応しました。
追加の質問がありますので、返信にて書き込みいたします。

PCは大型カード、スマホは横長カードにしたくて、追加CSSを入力した後、スマホは横長で並ぶようになりましたが、写真がはみ出してしまいました。

まだ仮のホームページで、トップのレイアウトを作っているところです。現状は、写真の解像度は全て1920✖️1280の状態です。

写真の解像度を変えないといけないのでしょうか。
アドバイスいただけますと幸いです。
よろしくお願いいたします。

サルワカくん
サルワカくん
2021/08/27

お世話になっております。

さらに以下のCSSを追加いただくといかがでしょうか?
よろしくお願いします。


.longc_img img {
padding: 0;
}
.longc_img {
padding: 10px;
}

よろしくお願いします。

アバター
mochi
2021/09/07

最初の質問主です。ご回答をいただいていたにも関わらず、確認・返信が遅くなり申し訳ございません。
記載いただいた方法で無事に解決いたしました。
迅速なご対応、誠にありがとうございました。