Home>

I want to display two DIV elements in a single vertical column when displayed on a smartphone.

Error message

Although it is displayed vertically, the width of the lower DIV is unusually narrow.
Like the DIV above, I want you to fill up to both ends of the screen.

Applicable source code

html

<body>
  <div>
    <div>
      <div class = 'col-xs-6'>
        <div>
          <img src = "../ data/image.jpg">
        </div>
      </div>
      <div class = 'col-xs-6'>
        <div class = 'comment_wrapper'><span>aaaa</span></div>
      </div>
    </div>
  </div>
</body>


css

.tag_link {
    color: # 333333;
    text-decoration: underline;
    margin-right: 10px;
}
#picture_area {
    display: inline-block;
    position: relative;
    margin: 20px 20px 20px 20px;
}
#picture_data {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#row_comment {
    background-color: # ffffe0;
    overflow-y: scroll;
}
.comment_wrapper {
    margin-top: 20px;
    width: 100%;
}
Supplemental information (language/FW/tool version etc.)

Bootstrap3.

  • Answer # 1

    Maybe it ’s not true, but is it something like this?

    <! DOCTYPE html>
    <html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet">
        <title>Title</title>
        <style type = "text/css">
            .tag_link {
                color: # 333333;
                text-decoration: underline;
                margin-right: 10px;
            }
            #picture_area {
                display: inline-block;
                position: relative;
                margin: 20px 20px 20px 20px;
            }
            #picture_data {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            #row_comment {
                background-color: # ffffe0;
                overflow-y: scroll;
            }
            .comment_wrapper {
                margin-top: 20px;
                width: 100%;
            }
            img {
                max-width: 100%;
            }
        </style>
    <body>
    <div>
        <div>
            <div class = 'col-xs-12 col-sm-6'>
                <div id = "picture_area col-xs-12">
                    <img id = "picture_data" src = "https://placehold.jp/3d4070/ffffff/500x500.png?text=../data/image.jpg">
                </div>
            </div>
            <div class = 'col-xs-12 col-sm-6' id = 'row_comment'>
                <div class = 'comment_wrapper'><span>aaaa</span></div>
            </div>
        </div>
    </div>
    <script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>