ウインドウを小さくしたときにチャットが交互に表示されるようにしたい。

前提・実現したいこと

現在、学校の授業でチャットボットのシステム開発をしています。
HTMLがうまく完成できず困っています。
ウインドウを小さくしたときにチャットが交互に表示されるようにしたいです。
試行錯誤してCSSのソースコードが大変なことになっていますがご了承ください。
よろしくお願いいたします。
※上の図はウインドウの大きさ最大の状態です。

発生している問題・エラーメッセージ

ウインドウを小さくするとチャットが交互に表示されないです。
試行錯誤して現在はウインドウを小さくしたときに右側のチャットは表示できるようになりました。
しかし、もう片方が画面外に消え表示すらされなくなりました。

該当のソースコード

---HTML---

<!DOCTYPE HTML>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>会議室予約システム:会議室予約chatbot</title>
    <!-- 共通CSS -->
    <link rel="stylesheet" href="css/main.css">
    <!-- ページごとCSS -->
    <link rel="stylesheet" href="css/chatbot.css">

    <!-- jQueryの指定 -->
    <script src="js/jquery-3.2.1.min.js"></script>

    <!-- 共通部分の読み込み -->
    <script type="text/javascript">
        $(function() {
            // 共通htmlにID属性をつけてload
            $("#header").load("include/header_after.html");
        });

    </script>

</head>

<body>
    <header>
        <div id="header"></div>
        <!-- header.html -->
    </header>

    <nav>
        <div id="nav"></div>
        <!-- nav.html -->
    </nav>


    <!-- ここから内容記述 -->
    <div id="contents">
        
        <!-- チャット表示 -->
        <div id="chatbot">
            
            <div id="wrapper">
            
                <div class="question_Box">
                    <div class="arrow_question">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div>
                
                <div class="question_Box">
                    <div class="arrow_answer">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div>
            
            <div class="question_Box">
                    <div class="arrow_question">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div>
                
                <div class="question_Box">
                    <div class="arrow_answer">
                    こんにちわこんにちわこんにちわこんにちわ
                    </div>
                </div><div class="question_Box">
                    <div class="arrow_question">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div>
                
                <div class="question_Box">
                    <div class="arrow_answer">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div><div class="question_Box">
                    <div class="arrow_question">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div>
                
                <div class="question_Box">
                    <div class="arrow_answer">
                    こんにちはこんにちはこんにちはこんにちは
                    </div>
                </div>
            </div>
            
        </div>
        <!-- end -->
        
        <div id="last">
        <div id="footer-fixed">
            <div id="footer-bk">
                <div id="footer">
                    <form>
                    <input type="text" id="chat">
                    <button id="send">送信</button>
                    </form>
                </div>
            </div>
        </div>
        </div>


    </div>
    <!-- end -->

</body>

</html>

---CSS---

body{
    position:absolute;
    width:100%;
    left:50%;
    width:900px;
    height: auto;
    margin-left:-690px;
}
#chatbot{
    background-color:#ffffff;
    width:900px;
    margin-left: 85px;
    padding-top:50px;
    min-height: 510px;
    height: auto !important;
    height: 510px;
    padding-bottom:50px;
}

div#footer-fixed {
    position: absolute;
    bottom: 0px;
    left: 45px;
    width: 100%;
    height: 100px;
}

div#footer-bk {
    background: -webkit-linear-gradient(#58938d 50%, #4c857f 50%);
    background: -o-linear-gradient(#58938d 50%, #4c857f 50%);
    background: linear-gradient(#58938d 50%, #4c857f 50%);
    padding: 10px 0 20px;
    height: 75px;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
div#footer {
    height: 100%;
    width: 960px;
}
#chat{
    width: 575px;
    height: 40px;
    border-radius: 10px;
    margin-left:100px;
    position:relative; bottom:8px;
}

#send {
    background: -webkit-linear-gradient(#ffffff 50%, #c6c6c6 50%);
    background: -o-linear-gradient(#ffffff 50%, #c6c6c6 50%);
    background: linear-gradient(#ffffff 50%, #c6c6c6 50%);
    color: #000000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    margin: 25px 0 0 100px;
    position:relative; bottom:8px;
}

#send:hover {
    opacity: 0.8;
}
#wrapper{
    margin: 20px auto;
    width:96%;
}

.arrow_question {
    position: relative;
    background: #c8cee3;
    border-radius: 10px;
    padding:3%;
    border: solid 0px #0000ff;
    display:inline-block;    
}

.arrow_question:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(200, 206, 227, 0);
	border-right-color: #c8cee3;
	border-width: 20px;
	margin-top: -20px;
}

.arrow_answer {
    position: relative;
    background: #e0d6b4;
    border-radius: 10px;
    padding:3%;
    margin-left: 375px;
    width:50%;
}
.arrow_answer:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(224, 214, 180, 0);
	border-left-color: #e0d6b4;
	border-width: 20px;
	margin-top: -20px;
}
.question_Box{
    margin-bottom: 8%;
    width: 64vw;
}

---言語---

HTML(CSS)

試したこと

CSSにbody、CSSのquestion_Boxにwidth: 64vw;を追加したり、色々と調整をしました。

補足情報（FW/ツールのバージョンなど）

Bracketsで開発をしています。

かなり下手な絵ですがイメージ図です。

kei344

2018/11/14 04:07

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

IGFS

2018/11/14 04:16

すみません、見づらかったですね...

yoshinavi

2018/11/14 04:43

HTMLの「viewport」設定はどうなっていますか？

IGFS

2018/11/14 05:24

viewportの設定はしていないです。

yoshinavi

2018/11/14 05:29

レスポンシブ対応させる場合は、viewport設定や、対象のブロック要素等の単位を考慮する必要があります。検索して確認してみてください。

行動規範の内容に同意します

回答1件

位置決めにposition:absolute;を多用しているのがそもそもの問題だと思います。
そのために、多くの要素でwidthを指定することになり、画面幅に合わせた表示が難しくなっています。
また、viewportが設定されていないため、画面幅ごとのCSSを個別に書くという方法も使えませんね。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

【実践！スマホサイトのviewport設定 - viewportとはなにか？ | CodeGrid】
https://app.codegrid.net/entry/whats-viewport

【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

投稿2018/11/14 05:29

編集2018/11/14 05:30

kei344

総合スコア69400