[ 解決済 ] スマホ版のトップページスライダー画面のボタンを非表示にする方法

[r_o]

■ WordPress のバージョン
6.6.1

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

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.26.2

■ Pro Unit のバージョン
0.26.8

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.5

■ 期待する動作
PC版のスライダーだとスマホ表示で見づらいので、別途スマホ版のトップページスライダー画面を作り、スマホ版の画像ではトップスライドページネーションを非表示にしたい。

■ 自分で試した事
以下2つを試してみましたが、スマホ版の画面でもトップページスライドべネーションの外枠のみ表示されます（添付の1.pngをご参照ください）

1）Lightning トップページスライドショの設定を変更（添付の2.png)

ボタンのテキスト（任意）に以下を入力

<div class=”d-none d-md-block”>お問い合わせはこちら</div>

スライタイトル（任意）とスライドテキスト（任意）にも同じコードを記述しておりますが、
こちらはスマホ版では問題なく非表示になります。

2）過去記事を参考にして追加CSSを記述（添付の3.png)

@media (max-width: 576px) {
/* モバイル */
.slide-main .swiper-pagination{
display:none;

}
}

■参考にした過去記事

[ 解決済 ] トップページのスライドショーの下にあるボタンを非表示にしたい。

スマホ版のみトップスライドべネーションを非表示にする方法を知っている方がおりましたら
ご教示いただければ幸いです。

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

■ 実際の症状
別途作ったスマホ版のトップページスライダー画像にトップスライドべネーションの外枠が表示される（添付の1.pngをご参照ください）。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

お世話になっております、該当サイトを確認いたしました。

d-none d-md-blockのクラス名をつけているので、「お問い合わせはこちら」のテキスト部分だけが非表示になっている状態です。リンクの<a>タグに枠線の装飾用のcssがかかっているので、枠だけ見えている状態です。

ですので、<a>タグから非表示にする場合は以下のCSSでいかがでしょうか。

/*Lightning トップページスライダー内のボタンを575.98px以下で非表示*/
@media (max-width: 575.98px){
.lightning_swiper .btn.btn-ghost{
display:none;
}
}

参考にしていただいた記事はスライダーのページネーションを非表示にする方法ですので、クラス名が違っています。

クラス名の調べ方は、Google Chromeブラウザの場合は ［検証］でデベロッパーツールが開きますので、そこから調べることができます。（添付画像参照）

ちょっとしたcssの調整などはこちらの記事がわかりやすいですので、ぜひ参考にしてください。

できる！CSSカスタマイズ

Attachments:

You must be logged in to view attached files.

[r_o]

ありがとうございました。
解決しました。
大変助かります。

[投稿者]

投稿