[ 解決済 ] モバイル表示時ウィジットの幅の調整方法について
[ 解決済 ] モバイル表示時ウィジットの幅の調整方法について
- このトピックには9件の返信、2人の参加者があり、最後に
により3年、 4ヶ月前に更新されました。
-
投稿
-
■ 利用テーマとバージョン :Katawaraバージョン: 1.0.7
■ 質問内容：モバイル表示時ウィジットの幅の調整方法について
ワードプレス初心者です。
【mt-systems】というプラグインを使って、予約カレンダーを表示させたいのですが、
添付画像のようにモバイル表示時にカレンダーが画面にうまく収まらずはみ出してしまいます。自分なりに調べて試行錯誤しましたが、うまくいきません。
どなたかご教授いただけると助かります。検索して出てきたコードを2種類追加CSSに以下を入力しましたが、変化しませんでした。
☆1つ目
@media (min-width: 576px)
.monthly-calendar table {
width: 80%;
}☆2つ目
@media (min-width: 320px) {
#content table tr th {
padding: 0px 10px;
}
#content table tr td {
padding: 0px 10px;
}
}
/*——————————————-*/
/* コンテンツ推奨サイズより大きい場合
/*——————————————-*/
@media (min-width: 660px) { /* スクロール分余裕に20px */
}
/*——————————————-*/
/* pc iPad3より大きい場合
/*——————————————-*/
@media (min-width: 770px) {
}
/*——————————————-*/
/* フルサイズ
/*——————————————-*/
@media (min-width: 970px) { /* スクロール分余裕に20px */
}よろしくお願いいたします。
ご存知の通り公式な対応としては外部のプラグインをインストールして調整CSSまでご案内というのは厳しいので、
とりあえず下記を見て自分で対応できそうか調べてみてください。https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/
※ 該当URLさえあればこちらで環境を作らなくても検証しやすいので回答率があがります。
※ 他のユーザー様でわかる方がいたら是非ご協力よろしくお願いいたします。
おそらく
.monthly-calendar table th { padding: 1em 0.5em; }でいけると思います。
コードのご教授ありがとうございます。
教えていただいたコードを追加ＣＳＳに入力しましたが、変化ありませんでした。
その他に、
1⃣ コードに !importantを追加する
2⃣ padding部分をwidthに変更して幅の％を変更する
3⃣ .monthly-calendar table th以外にth部分へtr、td、captionを入力する
4⃣ 【mt-systems】プラグイン自体を修正する（ネットの検索でヒットした修正例）を試しましたが、うまくいきませんでした。
私の知識不足のため、こちらのプラグインは一度諦めることにします。
お忙しい中でサポート外の案件にも関わらず、丁寧に対応してくださったことをとても感謝しています。
また、お手数をおかけして申し訳ございませんでした。えー！ あれ？ おかしいですね…。
いや、先のCSSを 外観 > カスタマイズ > 追加CSS に入れたらいけるはずなのですが…入れた状態で一度見せていただいて良いでしょうか？
- このトピックに返信するにはログインが必要です。
