[ 解決済 ] モバイル表示時ウィジットの幅の調整方法について

VWSとは フォーラム Katawara [ 解決済 ] モバイル表示時ウィジットの幅の調整方法について

[ 解決済 ] モバイル表示時ウィジットの幅の調整方法について

  • このトピックには9件の返信、2人の参加者があり、最後にkomorebiにより9ヶ月、 3週前に更新されました。
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #45051

    komorebi
    参加者

    ■ 利用テーマとバージョン :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 */
    }

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

    Attachments:
    You must be logged in to view attached files.
    #45219

    ご存知の通り公式な対応としては外部のプラグインをインストールして調整CSSまでご案内というのは厳しいので、
    とりあえず下記を見て自分で対応できそうか調べてみてください。

    https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/

    ※ 該当URLさえあればこちらで環境を作らなくても検証しやすいので回答率があがります。

    ※ 他のユーザー様でわかる方がいたら是非ご協力よろしくお願いいたします。

    #45257

    komorebi
    参加者

    石川さま

    いつもお世話になっております。
    添付していただいたリンクを見ながら修正箇所をトライしてみましたが、知識が足りないため解決できませんでした。

    修正したいカレンダーのあるページのリンクをつけさせていただきます。
    もしどなたか分かる方がいらっしゃいましたら、よろしくお願いいたします。

    #45258

    komorebi
    参加者

    #45259

    komorebi
    参加者

    #45263

    komorebi
    参加者

    すみません。
    URLの添付がうまくできず、トップページへのリンクになってしまいました。
    トップページスライドショー上のキャンペーンテキスト欄の緑色のボタンを押していただくと該当ページへ飛びます。

    #45283

    おそらく

    .monthly-calendar table th {
    padding: 1em 0.5em;
    }

    でいけると思います。

    #45365

    komorebi
    参加者

    コードのご教授ありがとうございます。

    教えていただいたコードを追加CSSに入力しましたが、変化ありませんでした。

    その他に、
    1⃣ コードに !importantを追加する
    2⃣ padding部分をwidthに変更して幅の%を変更する
    3⃣ .monthly-calendar table th以外にth部分へtr、td、captionを入力する
    4⃣ 【mt-systems】プラグイン自体を修正する(ネットの検索でヒットした修正例)

    を試しましたが、うまくいきませんでした。

    私の知識不足のため、こちらのプラグインは一度諦めることにします。
    お忙しい中でサポート外の案件にも関わらず、丁寧に対応してくださったことをとても感謝しています。
    また、お手数をおかけして申し訳ございませんでした。

    #45366

    えー! あれ? おかしいですね…。
    いや、先のCSSを 外観 > カスタマイズ > 追加CSS に入れたらいけるはずなのですが…

    入れた状態で一度見せていただいて良いでしょうか?

    #45452

    komorebi
    参加者

    石川さま

    いつもお世話になっております。
    追加CSSに入力していた他の項目を全て削除してから、教えていただいたコードを入力したところ表が枠内におさまりました!!!

    追加CSSに間違ったコードを入れていて、効かなかったのかもしれません。。

    お騒がせしました。
    そして、本当に助かりました!
    お忙しい中、丁寧に教えていただきましてありがとうございました!

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。