Как сделать так, чтобы HTML-форма на моем мобильном веб-сайте в книжной ориентации переходила из плавающего вправо в альбомную, каждый раз, когда я нажимаю на поля ввода?

Question

Я пытался использовать float, overflow, clear, и все же моя HTML-форма продолжает плавать прямо. Я предполагаю, что HTML-форма останется портретной на моем мобильном устройстве, когда я пойду, чтобы заполнить форму.

Это текущий код CSS для моей HTML-формы на настольной платформе:

form 
{
border: 10px solid #D3D3D3;
border-radius: 4px;
background: #D3D3D3;
width: 174px;
height: 306px;
position: absolute;
top: 212px;
left: 1168px;
font-family: "Arial", "Times New Roman", "Sans Serif";
font-style: normal;
text-decoration: none;
}
.FormHeading
{
text-decoration: underline;
font-weight: bold;
position: relative;
left: 29px;
}
input[type=text]
{
width: 168px;
}
textarea
{
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 01px;
width: 173px;
}

input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -40px;
left: 121px;
text-align: center;
}

Это текущий код моей HTML-формы на мобильном телефоне:

    <form name = "CommentsForm" action ="Actionpage.php" onsubmit="return       
    validateForm()" method="post">
    <u class = "FormHeading">Send Comment</u><br>
    <br>
    First Name:<br>
    <input type="text" name="firstname">
    <br>
    <div style = "position: relative; top: 4px; left: 01px;">
    Last Name:<br>
    <input type="text" name="lastname">
    </div>
    <br>
    <div style = "position: relative; top: -13px; left: 1px;">
     Email:<br>
    <input type="text" name="email">
    </div>
    <br>
    <div style = "position: relative; top: -24px; left:03px;">
    <label for="comment"> Comment:</label></div>
    <textarea id="comment" name="comment" placeholder="Type commment              
    here" style="height: 69px;">
    </textarea>
    <br>
    <br>
    <input type="submit" name ="submit" value="Send" >
    </form>

This is the css for the html form on my mobile website:

form 
{ 
border: 10px solid #D3D3D3; 
border-radius: 4px;
background: #D3D3D3;
width: 176px;
height: 319px;
position: absolute;
top: 620px; 
left: 91px;
font-family: "Arial", "Times New Roman", "Sans Serif"; 
font-style: normal;
text-decoration: none;
float: none;
}
.FormHeading
{
text-decoration: underline;
font-weight: bold;
position: relative;
left: 29px;
}
input[type=text]
{
width: 168px;
float: none;
}
input[type=text]:focus
{
float: none;

}
textarea
{
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 01px;
width: 173px;
float: none;
}

input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}

Обратите внимание, что у меня HTC desire 626, и я проектирую свой мобильный веб-сайт с учетом этого.