スマホの画面の横幅に合わせてチャットボックスのデザインを修正したい | コミュニティ

タグ付き： widget, アンケート, 自動応答チャット形式アンケート（選択肢をクリックして次の設問表示）※要javascript

コミュニティ

スマホの画面の横幅に合わせてチャットボックスのデザインを修正したい

トピックス by widget初心者 1792 pt 2023年9月25日 14:42 362 PV
【Widget名】

自動応答チャット形式アンケート（選択肢をクリックして次の設問表示）※要javascript(アンケート)

【修正したいこと】

CSS部分で文字の大きさや横幅の長さを変更しても、スマホ実機で確認した際に大きさが変更されません。

スマホの画面の横幅に合わせて、文字や写真が見やすいように変更したいです。

【参考画像】

https://drive.google.com/file/d/1FLIsSll4C7kTEuTsbVVmLWLGSiJrtIjb/view
widgetマスター 1 年, 1 月前 2 人 · 1 コメント
1 コメント

widgetマスター

モデレータ

2023年9月25日 18:06

【Widget名】

自動応答チャット形式アンケート（選択肢をクリックして次の設問表示）※要javascript

【カテゴリー】

アンケート

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/cxZnPHY_yBQktfbFeSeg/draft?token=4eaeacec0c68f72e0aa4fa3c0b53690f

現在組み込まれているウィジェットを調整する場合は、以下のようにSCCを修正してください。

＜CSS＞

@media screen and (max-width: 600px) {
    .auto-chats {
        font-size: 3vw;
    }
    /* 以下追加 */
    .auto-chats-wrap {
        padding: .25em;
    }
    .auto-chats-item .message {
        grid-template-columns: 6.0em auto;
    }
    .auto-chats-item .baloon,
    .auto-chats-item .answer {
        width: 100%;
        font-size: 1.25em;
        line-height: 2;

    }
    /* 以下削除 */
  .auto-chats-item .baloon,
  .auto-chats-item .answer {
    width: 75%;
  }
}