CODEWITHSUNDEEP
htmlcssformswindowfield
stewy
stewy

Reputation: 35

How to resize form field based on screen size?

is it possible to have my input field resize when i shorting or lengthen my browser window screen? I put my input form field in a div .chatbox and need it to grow of shorten base of window size. please take a look examples below, looking for short simple solution if possible.

Any suggestions or example would be very grateful here. Thx stewy

enter image description here

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css" href="/fonts">
    
   @font-face {
   font-family: vag;
   src: url(fonts/VAGRoundedStd-Light.otf);
       
}
body {
    background-color: #6B6B6B;
    background: url(http://wizzfree.com/pix/bg.jpg) fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
    overflow: hidden;
    margin: 0;
}
    /*............... chatbox ...............*/
    
    .chatbox {
    position: absolute;
    bottom: 50px;
    height: 42px;
    left: 50%;
    max-width: 600px;
    margin-left: -300px; /* half width */
    background-color: #2f2f2f;
    border-radius: 0px 30px 30px 0px;
}
    /*... input message ...*/
    
    input[type=text] {
    max-width: 300px;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 37px;
    font-family: vag;
    color: white;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.5px;
    background-color:transparent;
}
    /*......... crossfade on buttons .........*/

    .hover img{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}
<div class="chatbox" style="display:flex;margin-left:-150px;">
<!-- emojis list -->
<a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" height="42" style="margin-left:-32px;"><img src="http://wizzfree.com/pix/smiley2.png" height="42" class="nohover" style="margin-left:-32px;"><img src="http://wizzfree.com/pix/smiley.png" height="42" class="hover" style="margin-left:-32px;"></a>
<!-- input message -->
<form style="margin-left:-10px;"><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!-- typing on/off -->
<p style="margin-top:18px;color:#00fff6;font-family:vag;font-size: 16px;"><em><strong>Yummi is Typing</strong></em>...&nbsp;&nbsp;&nbsp;</p>
</div>

Upvotes: 0

Views: 5879

Answers (2)

Arik Jordan Graham
Arik Jordan Graham

Reputation: 341

yea of course you can . use the '@media screen' property in css whenever the screen width/height resize to certain size , you can style your elements according to it

@media screen (min-width > x) and (max-width < y) {
   input {
     width: <new-width>
   }

}

read about it on w3school

if you want to resize the input more smoothly i saggies to use a framework .

Upvotes: 0

Abel de Bruijn
Abel de Bruijn

Reputation: 180

Would this answer your question?

.chatbox {
  position:fixed;
  bottom:50px;
  left: 50%; /* center on x direction */
  transform:translateX(-50%);
  width:60vw;
  height:50px;
}

input {
  height:100%;
  width:100%;
  background:green;
}
<div class="chatbox">
  <input type="text"/>
</div>

Upvotes: 1

Related Questions