Fit a chat-bot to full screen on mobile/tablets

I have integrated a chat bot onto a website which opens on the bottom right side of the screen on click of a button. I just need this bot to automatically fit all mobile/tablet screen devices on click of the button.
Note: I want the bot to occupy the whole screen for mobile/tablets devices.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />



<div class="container">

  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>

  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">

    <div class="col-xs-12 col-md-12">

      <div class="panel panel-default noBorder">

        <div class="panel-heading top-bar chat-heading">

          <div class="col-md-8 col-xs-8 noLRP">

            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>

            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->

          </div>

          <div class="col-md-4 col-xs-4" style="text-align: right;">

            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->

            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>

            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>

          </div>

        </div>

        <div id="response" class="panel-body msg_container_base"></div>

        <div id="footdiv" class="panel-footer">

          <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />

            <span class="input-group-btn">

              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>

            </span>

          </div>

        </div>

      </div>

    </div>

  </div>   

</div>

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

asked Nov 15 '18 at 7:43

Amey P Naik

31749

What you want is not clear. Please indicate exactly what div sould do what.

– Jean-Marc Zimmer
Nov 15 '18 at 9:45

The html provided is the chat bot which is inserted on a website. A button is also present on the website which when clicked opens the bot on the bottom right of the site.

– Amey P Naik
Nov 15 '18 at 10:38

It works fine on a desktop screen. I just the chatbot to occupy full screen when opened on mobile/tablet.

– Amey P Naik
Nov 15 '18 at 10:39

the chat bot is the .container ? The easiest way to fix this is to put it in a div that will resize depending on the screen. I'm looking into it.

– Jean-Marc Zimmer
Nov 15 '18 at 10:41

No, 'chat_window_1' is the bot

– Amey P Naik
Nov 15 '18 at 10:42

|
show 1 more comment

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />



<div class="container">

  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>

  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">

    <div class="col-xs-12 col-md-12">

      <div class="panel panel-default noBorder">

        <div class="panel-heading top-bar chat-heading">

          <div class="col-md-8 col-xs-8 noLRP">

            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>

            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->

          </div>

          <div class="col-md-4 col-xs-4" style="text-align: right;">

            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->

            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>

            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>

          </div>

        </div>

        <div id="response" class="panel-body msg_container_base"></div>

        <div id="footdiv" class="panel-footer">

          <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />

            <span class="input-group-btn">

              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>

            </span>

          </div>

        </div>

      </div>

    </div>

  </div>   

</div>

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

asked Nov 15 '18 at 7:43

Amey P Naik

31749

What you want is not clear. Please indicate exactly what div sould do what.

– Jean-Marc Zimmer
Nov 15 '18 at 9:45

The html provided is the chat bot which is inserted on a website. A button is also present on the website which when clicked opens the bot on the bottom right of the site.

– Amey P Naik
Nov 15 '18 at 10:38

It works fine on a desktop screen. I just the chatbot to occupy full screen when opened on mobile/tablet.

– Amey P Naik
Nov 15 '18 at 10:39

the chat bot is the .container ? The easiest way to fix this is to put it in a div that will resize depending on the screen. I'm looking into it.

– Jean-Marc Zimmer
Nov 15 '18 at 10:41

No, 'chat_window_1' is the bot

– Amey P Naik
Nov 15 '18 at 10:42

|
show 1 more comment

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />



<div class="container">

  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>

  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">

    <div class="col-xs-12 col-md-12">

      <div class="panel panel-default noBorder">

        <div class="panel-heading top-bar chat-heading">

          <div class="col-md-8 col-xs-8 noLRP">

            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>

            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->

          </div>

          <div class="col-md-4 col-xs-4" style="text-align: right;">

            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->

            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>

            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>

          </div>

        </div>

        <div id="response" class="panel-body msg_container_base"></div>

        <div id="footdiv" class="panel-footer">

          <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />

            <span class="input-group-btn">

              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>

            </span>

          </div>

        </div>

      </div>

    </div>

  </div>   

</div>

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

asked Nov 15 '18 at 7:43

Amey P Naik

31749

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />



<div class="container">

  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>

  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">

    <div class="col-xs-12 col-md-12">

      <div class="panel panel-default noBorder">

        <div class="panel-heading top-bar chat-heading">

          <div class="col-md-8 col-xs-8 noLRP">

            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>

            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->

          </div>

          <div class="col-md-4 col-xs-4" style="text-align: right;">

            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->

            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>

            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>

          </div>

        </div>

        <div id="response" class="panel-body msg_container_base"></div>

        <div id="footdiv" class="panel-footer">

          <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />

            <span class="input-group-btn">

              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>

            </span>

          </div>

        </div>

      </div>

    </div>

  </div>   

</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />



<div class="container">

  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>

  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">

    <div class="col-xs-12 col-md-12">

      <div class="panel panel-default noBorder">

        <div class="panel-heading top-bar chat-heading">

          <div class="col-md-8 col-xs-8 noLRP">

            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>

            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->

          </div>

          <div class="col-md-4 col-xs-4" style="text-align: right;">

            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->

            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>

            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>

          </div>

        </div>

        <div id="response" class="panel-body msg_container_base"></div>

        <div id="footdiv" class="panel-footer">

          <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />

            <span class="input-group-btn">

              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>

            </span>

          </div>

        </div>

      </div>

    </div>

  </div>   

</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />



<div class="container">

  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>

  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">

    <div class="col-xs-12 col-md-12">

      <div class="panel panel-default noBorder">

        <div class="panel-heading top-bar chat-heading">

          <div class="col-md-8 col-xs-8 noLRP">

            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>

            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->

          </div>

          <div class="col-md-4 col-xs-4" style="text-align: right;">

            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->

            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>

            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>

          </div>

        </div>

        <div id="response" class="panel-body msg_container_base"></div>

        <div id="footdiv" class="panel-footer">

          <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />

            <span class="input-group-btn">

              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>

            </span>

          </div>

        </div>

      </div>

    </div>

  </div>   

</div>

html twitter-bootstrap responsive-design chatbot

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

asked Nov 15 '18 at 7:43

Amey P Naik

31749

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

asked Nov 15 '18 at 7:43

Amey P Naik

31749

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

edited Nov 15 '18 at 10:35

Jean-Marc Zimmer

37414

asked Nov 15 '18 at 7:43

Amey P Naik

31749

asked Nov 15 '18 at 7:43

Amey P Naik

31749

asked Nov 15 '18 at 7:43

Amey P Naik

31749

What you want is not clear. Please indicate exactly what div sould do what.

– Jean-Marc Zimmer
Nov 15 '18 at 9:45

The html provided is the chat bot which is inserted on a website. A button is also present on the website which when clicked opens the bot on the bottom right of the site.

– Amey P Naik
Nov 15 '18 at 10:38

It works fine on a desktop screen. I just the chatbot to occupy full screen when opened on mobile/tablet.

– Amey P Naik
Nov 15 '18 at 10:39

the chat bot is the .container ? The easiest way to fix this is to put it in a div that will resize depending on the screen. I'm looking into it.

– Jean-Marc Zimmer
Nov 15 '18 at 10:41

No, 'chat_window_1' is the bot

– Amey P Naik
Nov 15 '18 at 10:42

|
show 1 more comment

What you want is not clear. Please indicate exactly what div sould do what.

– Jean-Marc Zimmer
Nov 15 '18 at 9:45

The html provided is the chat bot which is inserted on a website. A button is also present on the website which when clicked opens the bot on the bottom right of the site.

– Amey P Naik
Nov 15 '18 at 10:38

It works fine on a desktop screen. I just the chatbot to occupy full screen when opened on mobile/tablet.

– Amey P Naik
Nov 15 '18 at 10:39

the chat bot is the .container ? The easiest way to fix this is to put it in a div that will resize depending on the screen. I'm looking into it.

– Jean-Marc Zimmer
Nov 15 '18 at 10:41

No, 'chat_window_1' is the bot

– Amey P Naik
Nov 15 '18 at 10:42

What you want is not clear. Please indicate exactly what div sould do what.

– Jean-Marc Zimmer
Nov 15 '18 at 9:45

The html provided is the chat bot which is inserted on a website. A button is also present on the website which when clicked opens the bot on the bottom right of the site.

– Amey P Naik
Nov 15 '18 at 10:38

It works fine on a desktop screen. I just the chatbot to occupy full screen when opened on mobile/tablet.

– Amey P Naik
Nov 15 '18 at 10:39

the chat bot is the .container ? The easiest way to fix this is to put it in a div that will resize depending on the screen. I'm looking into it.

– Jean-Marc Zimmer
Nov 15 '18 at 10:41

No, 'chat_window_1' is the bot

– Amey P Naik
Nov 15 '18 at 10:42

|
show 1 more comment

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314564%2ffit-a-chat-bot-to-full-screen-on-mobile-tablets%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky