![見出し画像](https://assets.st-note.com/production/uploads/images/139597944/rectangle_large_type_2_898bb0541ac287916344cfb47156949c.jpeg?width=800)
Wordpress-lightningのモバイル表示
クリニックのホームページでは、トップページを2列にして、左のサイドにメニューと診療時間がなどを表示しています。
しかし、これらの情報はメインの列(右の列)の下方にもあります。
![](https://assets.st-note.com/img/1714898585392-5kzRK48fbU.jpg)
モバイル表示の時は、メインの列が表示された後に左サイドの表示が出てきますので、モバイル表示では左サイドの内容は表示したくありません。
そこで、ネット検索すると・・・
出てきます。追加CSSでコントロールです。
![](https://assets.st-note.com/img/1714898650183-leNeoit69p.jpg?width=800)
しかし、CSSのクラス名がWordpressのテーマやバージョンによって異なっていて、うまくコントロール出来ません。
そんな時は、Webブラウザでソースコードを表示して、その該当のクラス名を探します。
![](https://assets.st-note.com/img/1714898710262-W7n6Wl64BD.jpg?width=800)
そして探しだしたクラス名でCSSを追加するとうまく行きます。
![](https://assets.st-note.com/img/1714899025008-pvsmUVGZBC.jpg)
私の推測でクラス名をPick-upしていますので、本来は別のclass名で実施すべきなのかもしれませんが、とりあえず、上記の方法でうまくいきました。
この記事が気に入ったらサポートをしてみませんか?