[ 解決済 ] モバイル時のみフッターウィジェットエリアの数を１つに

[issy]

■ WordPress のバージョン
5.8

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.11.2

■ スキンの種類
Origin II

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
VK All in One Expansion Unit バージョン 9.64.3.3

■ 期待する動作
スマホなどのモバイル利用時のみ、フッターウィジェットエリアの数を１つに減らしたいです。
現在、フッターウィジェットエリアは３つで設定していますが、モバイル利用時にサイトの長さが長くなってしまうため、モバイル時のみ１つに減らして表示させたいのですが、可能でしょうか。

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

■ 自分で試した事
@media only screen and (max-device-width: 480px) {
footer {
display:none !important;
}
}
としましたが、当然ですがフッター部が全て消えてしまいます。
１つめのエリアだけは表示させたいです。

■ 症状が発生するブラウザ
firefox

■ 実際の症状
@media only screen and (max-device-width: 480px) {
footer {
display:none !important;
}
}
としましたが、当然ですがフッター部が全て消えてしまいます。
１つめのエリアだけは表示させたいです。

■ その他特記事項

[うなこ]

スマホなどのモバイル利用時のみ、フッターウィジェットエリアの数を１つに減らしたいです。
現在、フッターウィジェットエリアは３つで設定していますが、モバイル利用時にサイトの長さが長くなってしまうため、モバイル時のみ１つに減らして表示させたいのですが、可能でしょうか。

機能としては無いので、CSSで対応していただく形であっております。
検証ツールでhtmlを確認していただくと、ウィジェットに、それぞれ違うクラス名がついておりますので、
そのクラス名に対して display:none; すると、やりたいことができると思います。

もしくは、２番目と３番目を非表示にするやり方でもできるかと思います。
「nth-of-type 使い方」　などで検索すると、使い方がわかるかなと思います。
メディアクエリの中に以下のコードを入れてみてください。

.footerWidget .col-md-4:nth-of-type(2n),
.footerWidget .col-md-4:nth-of-type(3n){
display:none;
}

ｃｓｓ参考サイト

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[issy]

うなこ さま、早々のご回答ありがとうございます。
疑似クラスを使う方法は思いつきませんでした。勉強不足でお恥ずかしい。
以下の内容をCSSに追加して解決できました。

ありがとうございました。

@media only screen and (max-device-width: 480px) {
.siteFooter .col-md-4:nth-of-type(2n),
.siteFooter .col-md-4:nth-of-type(3n) {
display:none !important;
}
}

• この返信は3年、 3ヶ月前にissyが編集しました。

[投稿者]

投稿