モバイルでのブートストラップチャットウィジェット

Question

www.bestdealadvisors.comのチャットウィジェットは、デスクトップでは機能しますが、モバイルデバイスではうまく機能しません。例えばiPhoneでは、ウィジェットの半分だけが表示され、折りたたむことはできません。 モバイルデバイスにウィジェットを正しく表示するために必要なCSSを誰かに見せてもらえますか？

Answer 1

最良の結果を得るには、メディアクエリを使用する必要があります。

あなたはチャットウィジェットのための次の要素を持っている：

<div class="chatcontainer"> 

次のCSSスタイルを持っています

.chatcontainer { 
    display: inline-block; 
    width: 400px; 
    position: fixed; 
    left: 65%; 
    bottom: 0; 
} 

ここleftプロパティは、モバイルデバイス上の問題が発生するが。メディアクエリを使用して、特定の解像度の下に、このプロパティをオーバーライドすることができます：768pxの下に、例えば以下のように、あなたはそれを変更するには、メディアクエリを記述することができます。

.chatcontainer { 
    display: inline-block; 
    width: 400px; 
    position: fixed; 
    left: 65%; 
    bottom: 0; 
    @media (max-width: 768px) { 
     left: 10%; 
     right: 10%; 
    } 
} 

ブートストラップのメインコンセプトは、いくつかのウィジェットをすることができますが、ということですウェブプラットフォーム上の行に配置されると、各ウィジェットはモバイルデバイス上で1行全体を占有します。チャットウィジェットは、右に浮かべることなく、行全体を占める必要があります。

また、チャットウィジェットを最初に非表示にする必要があります。右下にフラットな丸いボタンを配置してウィジェットを開くことができます。

Answer 2

ブートストラップを使用できます。自動形状を提供します。あなたはレートを指定するだけです。フィールドを12個に分割する。例えば.col-sm-4の意味は、divはルートタグ/フィールドの4/12レートを持つということです。