How to prevent mobile keyboard (android) from messing up layout?

My grid layout is being pushed up when you click on an input field, as pretty much everything is using % for height it makes sense, however is there anyway to stop it being messed up. I've tried using media queries to change the .grid-container grid-template-rows the only thing with this is that it would need to tested on a lot of phones to make sure it comes out correctly as needed.

Is there any solution through CSS or Jquery/JS?

HTML code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
        <link rel="stylesheet" type="text/css" href="./CSS/all.css">        
        <link rel="stylesheet" type="text/css" href="./CSS/main.css">
        <link rel="stylesheet" type="text/css" href="./CSS/messages.css">
        <script type="text/javascript" src="./JS/jquery-3.4.1.js"></script>
        <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  </head>
  <body>
        <div class="grid-container">
            <div class="row">
                <div class="col-12">
                    <div class="topnav">
                        <a href="myShifts.html"><i class="fas fa-clock fa-3x fa-fw"></i></a>
                        <a href="timesheets.html"><i class="fas fa-edit fa-3x fa-fw"></i></a>
                        <a href="availability.html"><i class="fas fa-calendar-alt fa-3x fa-fw"></i></a>
                        <a href="messages.html"><i class="fas fa-comments fa-3x fa-fw"></i></a>
                        <a href="accounts.html"><i class="fas fa-cog fa-3x fa-fw"></i></a>
                        <i class="fas fa-bars fa-3x fa-fw icon-float-right" id="sidenav-icon"></i>  
                        <div class="sidenav">
                            <a class="closebtn">&times;</a>
                            <a href="myShifts.html">
                                <div class="flex-container">
                                        <div class="item img"><i class="fas fa-clock fa-lg"></i></div>  
                                        <div class="item text">Shifts</div>                                     
                                </div>
                            </a>
                            <a href="timesheets.html">
                                <div class="flex-container">
                                        <div class="item img"><i class="fas fa-edit fa-lg"></i></div>   
                                        <div class="item text">Timesheets</div>                                     
                                </div>
                            </a>
                            <a href="availability.html">
                                <div class="flex-container">
                                        <div class="item img"><i class="fas fa-calendar-alt fa-lg"></i></div>   
                                        <div class="item text">Availability</div>                                       
                                </div>
                            </a>
                            <a href="messages.html">
                                <div class="flex-container">
                                        <div class="item img"><i class="fas fa-comments fa-lg"></i></div>   
                                        <div class="item text">Messages</div>                                       
                                </div>
                            </a>
                            <a href="messages.html">
                                <div class="flex-container">
                                        <div class="item img"><i class="fas fa-cog fa-lg"></i></div>    
                                        <div class="item text">Settings</div>                                       
                                </div>
                            </a>
                        </div>              
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="border-header">
                        <h3>NAME</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="msg-page">
                        <div class="messages" id="msg-list">
                            <div class="msg">
                                <div class="received">
                                    <div class="msg-header">
                                        <span class="time">13:24 | September 12</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg HereText Msg HereText Msg HereText Msg Here</p>                 
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="sent">
                                    <div class="msg-header">
                                        <span class="time">13:29 | September 12</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg HereText Msg Here</p>                   
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="received">
                                    <div class="msg-header">
                                        <span class="time">14:12 | September 12</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg HereText Msg Here</p>                   
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="received">
                                    <div class="msg-header">
                                        <span class="time">16:39 | September 14</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg HereText Msg HereText Msg Here</p>                  
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="received">
                                    <div class="msg-header">
                                        <span class="time">13:24 | September 12</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg Here Text Msg Here Text Msg Here Text Msg Here Text Msg Here</p>                    
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="sent">
                                    <div class="msg-header">
                                        <span class="time">13:29 | September 12</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg HereText Msg HereText Msg Here</p>                  
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="received">
                                    <div class="msg-header">
                                        <span class="time">14:12 | September 12</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg Here</p>                    
                                    </div>                  
                                </div>
                            </div>
                            <div class="msg">
                                <div class="received">
                                    <div class="msg-header">
                                        <span class="time">16:39 | September 14</span>
                                    </div>
                                    <div class="msg-body">
                                        <p>Text Msg HereText Msg Here</p>                   
                                    </div>                  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="footer">
                        <textarea id="txtmsg-body" rows="3" placeholder="Enter message here.."></textarea>
                        <button id="msg-send">
                            <i class="fas fa-paper-plane fa-2x fa-fw"></i>
                        </button>   
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./JS/main.js"></script>
        <script type="text/javascript" src="./JS/messages.js"></script>
    </body>
</html>

CSS Main:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
    outline: none;

/*
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
*/

    -webkit-tap-highlight-color: transparent;
}

html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background-color: white;
    font-family: "Lucida Sans", sans-serif;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

[class*="col-"] {
    float: left;
    height: 100%;
    /*padding: 15px;*/
}

.grid-container > .row:after {
    content: "";
    clear: both;
    display: table;
}

/* Using the new nav bar with icons instead of text */
.topnav {
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    background-color: #0984e3;
    height: 100%;

/*  font-size: 0.9em;*/
}

.topnav > a, .topnav > i {
    color: white;
}

.topnav .sidenav {
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: #0984e3;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

.topnav .sidenav.open {
    border-right: 1px solid black;
}

.sidenav .flex-container {
    display: flex;
    align-content: flex-start;
    padding: 0px;
    margin: 0px;
}

.sidenav > a {
    text-decoration: none;
}

.sidenav .flex-container .item {
    color: white;
    font-size: 1.2em;
    padding: 5px 0px 5px 15px;
}

.sidenav .flex-container .item.img {
    width: 20%;
}

.sidenav .flex-container .item.text {
    width: 80%;
}

.topnav .sidenav .closebtn {
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 25px;
    color: white;
}

.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    position: relative;
    text-align: center;
}

.border-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    box-shadow: 0px 2px 5px 0.25px grey;
    z-index: 2;
    position: relative;
}

h3 {
    text-align: center;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

CSS Messages:

.grid-container {
    display: grid;
    /* Might have to change this based on the current page as each page will have different row values */
    grid-template-rows: 8% 10% 75% 7%;
/*  grid-template-rows: 100%;*/
    height: 100%;
}
/*

@media screen and (max-height: 600px) {
    .grid-container {
        grid-template-rows: 12.25% 17.75% 57.75% 12.25%;
    }
}

@media screen and (max-height: 400px) {
    .grid-container {
        grid-template-rows: 21% 20% auto 21%;
    }
}
*/

.message-container {
    display: block;
    height: 100%;
}

.message-container::after {
    content: '';
    clear: both;
    display: table;
}
/*

.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    box-shadow: 0px 2px 5px 0.25px grey;
    z-index: 2;
    position: relative;
}
*/

.msg-page {
    max-width: 100%;
    height: 100%;
    z-index: 1;
}

.messages {
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow-y: scroll;
}

.msg {
    padding: 10px 15px 10px 15px;
    color: white;
}

.msg::after {
    content: ' ';
    display: block;
    height: 0;
    clear: both;    
}

.msg .received {
    background-color: #00b894;
}

.msg .sent {
    background-color: #0984e3;
    float: right;
}

.msg > div:first-child {
    padding: 10px;
    border-radius: 5px;
    width: 90%;
}

.msg .msg-body p {
    padding: 0px;
    margin: 0px;
}

.chats {
    padding: 5px 25px 5px 20px;
    width: 50%;
    display: block;
}

.received-msg {
    background-color: lightgray;    
}

.sent-msg {
    background-color: lightblue;
    right: 0px;
}

.footer {
    display: flex;
    box-shadow: 0px -2px 5px 0.25px grey;
    height: 100%;
}

.footer input[type=text] {
    width: 85%;
    min-height: 100%;
    height: 100%;
    border: none;
    padding: 0px 0px 0px 15px;
    font-size: 25px;
}

.footer input[type=text]:focus {
    min-height: 100%;
    height: 100%;
    /* TODO: OUTLINE REMOVAL FROM MOST ELEMENTS ???? */
    outline: none;
}

.footer textarea {
    resize: none;
    border: none;
    width: 85%;
    height: 100%;
    font-size: 5vw;
    padding: 15px 0px 0px 15px;
    justify-content: center;
}

.footer button{
    width: 15%;
    min-height: 100%;
    height: 100%;
    border: none;
    background-color: white;
}