Home>

I want to change the size of the text box placed in the image, such as "0% of the smartphone screen".
The CSS is a modified version of the sample.

We apologize for the inconvenience, but if you know it, we would appreciate it if you could answer.

Even if you specify width in CSS, the size of the text box does not change, only the position changes.
Corresponding source code
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Title</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" media = "screen">
</head>
<body>


    
        
    
  <form method = "post">
        
          <input type = "text" name = "view_name" value = "">
        
        
          <input type = "submit" name = "btn_submit" value = "write">
        
  </form>

</body>
</html>
@charset "utf-8";
/ * CSS Document * /
/ * ----------------------
    Default style
----------------------- * /
body, p, h1, h2, h3, h4, h5, h6,
span, small, strong,
div, ul, li,
figure, img,
header, footer, nav, section {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 1rem;
}
header, footer, nav, section {display: block;}
html {
    font: 13px/1.3 "Hiragino Kakugo Pro W3";
    -webkit-text-size-adjust: none;}
li {list-style: none;}

/ * ----------------------------------------
    Share all pages from here
---------------------------------------- * /
body {
    background: url (img/bg.jpg) # 000;
    color: # 5D5D5D;
}
/ * Click here to change the link color * /
a {
    color: # FFA49B;
    text-decoration: none;
}
/*【Rounded corners】
 For content that I want to round the corners
 Please specify in the class.
* /
.corner {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.corner img {
    background: #FFF;
    padding: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
/ * ----------------------------------------
    Main story from here
---------------------------------------- * /
.top_img {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
    overflow: hidden;
    border-top: solid 1px # 202020;
    border-bottom: solid 1px # 000;
    text-align: center
}
.top_img img {
    width: 100%;
    height: auto;
    border: solid 1px # 333333;
}
.absolute {
    position: absolute;
    width: 100%;
    bottom: 0px;
}
.texstbox {
    position: absolute;
    left: 5%;
    bottom: 25%;
    width: 50%;
}
.texst_inpt {
    position: absolute;
    right: 30px;
    bottom: 150px;
}
}
What I tried

The size did not change when I removed the styles other than those set in .texstbox in the F12 developer tools.