How to fit text box into minimize screen? - html

Question

I have created a web form to allow users to fill in information about books they want to search. I just want to know how to automatically fit a text box into the form when I split my screen to the side of my laptop. On fullscreen it would fit just fine. For the details of Author's name, the text boxes should also be in a single line. But when i split screen, the boxes lump together. Is this a limitation in css?
Screenshot of web form in split screen
Screenshot of web form in fullscreen
<style>
#rcorners2 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 400px;
height: 5px;
}
</style>
<style>
#rcorners3 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 100px;
height: 5px;
}
</style>
<div class="column" style="background-color:#6EFFFF;">
<center>Enter Advanced Search Terms: </center><br>
<center> Keywords: <br>
<input type="text" id="rcorners2" name="keyword" size="50"><br />
Title Words: <br>
<input type="text" id="rcorners2" name="titlewords" size="50"><br />
<br>
<br>
Author's Name: <br></center>
<br>
<td>
<tr>
<center>
Last name
<input type="text" id="rcorners3" name="titlewords" size="10">
First name
<input type="text" id="rcorners3" name="titlewords" size="10">
Initial
<input type="text" id="rcorners3" name="titlewords" size="10">
<center>
</tr>
</td>

Answer 1

It seems that you are beginner in web development. I will suggest you to use percentage but not pixels for width. As you asked, that's not a limitation in css. The width will remain the same in any device or resolution from which you access the page. If you want to make your site responsive, use only percentage in width and pixels only in height.
Another suggestion : You're not needed to use two style elements. You can include both the classes in one style.
<style>
#rcorners2 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 100%;
height: 5px;
}
#rcorners3 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 100%;
height: 5px;
}
</style>
<div class="column" style="background-color:#6EFFFF;">
<center>Enter Advanced Search Terms: </center><br>
<center> Keywords: <br>
<input type="text" id="rcorners2" name="keyword"
size="50"><br />
Title Words: <br>
<input type="text" id="rcorners2" name="titlewords"
size="50"><br />
<br>
<br>
Author's Name: <br></center>
<br>
<td>
<tr>
<center>
Last name
<input type="text" id="rcorners3" name="titlewords"
size="10">
First name
<input type="text" id="rcorners3" name="titlewords"
size="10">
Initial
<input type="text" id="rcorners3" name="titlewords"
size="10">
<center>
</tr>
</td>
I hope this will help you.

Answer 2

This isn't a limitation of css per say. You have not given your HTML enough structure or css to properly format the inputs as the size changes.
There are a lot of ways to tackle this. Is this for a homework assignment?
In your css you are setting a static size which will overflow the container that is housing the input field. If you change that to a percentage it will go a long way.
width: 80%;
I would suggest spending some time over at w3 or some other website and learn a little about responsive layouts.
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/html/html_responsive.asp

Answer 3

Try This:
#rcorners2 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 90%;
height: 5px;
}
#rcorners3 {
border-radius: 25px;
border: 1px solid;
padding: 10px;
width: 25%;
height: 5px;
}
<div class="column" style="background-color:#6EFFFF;">
<center>Enter Advanced Search Terms: </center><br>
<center> Keywords: <br>
<input type="text" id="rcorners2" name="keyword" size="50"><br />
Title Words: <br>
<input type="text" id="rcorners2" name="titlewords" size="50"><br />
<br>
<br>
Author's Name: <br></center>
<br>
<td>
<tr>
<center>
Last name
<input type="text" id="rcorners3" name="titlewords" size="10">
First name
<input type="text" id="rcorners3" name="titlewords" size="10">
Initial
<input type="text" id="rcorners3" name="titlewords" size="10">
</center>
</tr>
</td>
</div>