test

make_video.html

@@ -600,7 +600,6 @@
           txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
           txtinput.value = historyItem.text_content[i];
           txtinput.setAttribute('placeholder', `${i+1}`);
-          txtinput.style.width = "80%";
           input_sec.appendChild(txtinput);
 
           // img url input
@@ -706,7 +705,6 @@
         txtinput.classList.add('txtsrc', `txtsrc${i}`);
         txtinput.value = "";
         txtinput.setAttribute('placeholder', `台詞`);
-        txtinput.style.width = "80%";
         input_sec.appendChild(txtinput);
 
         // img url input

make_video_eng.html

@@ -260,7 +260,7 @@
                         data-bs-placement="right" title="Type in your content and images. Supported File Formats: png, jpg, mp4.">
                       </h3>
                       <br/>
-                      <div class="img-inputTest mt-3">
+                      <div class="img-inputTest mt-3 input_eng">
                         <!-- <div class="input-sec input-sec1 p-3 mb-3">
                           <input type="text" name="s1" placeholder="Subtitle" class="subsrc subsrc1">   
                           <input type="text" name="t1" class="txtsrc txtsrc1" placeholder="Line" style="width: 100%;">
@@ -613,7 +613,6 @@
           subtitleinput.classList.add('subsrc', `subsrc${i+1}`);
           subtitleinput.value = historyItem.text_content[i];
           subtitleinput.setAttribute('placeholder', `Subtitle`);
-          subtitleinput.style.width = "80%";
           input_sec.appendChild(subtitleinput);
 
           // text input
@@ -623,7 +622,6 @@
           txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
           txtinput.value = historyItem.text_content[i];
           txtinput.setAttribute('placeholder', `Line`);
-          txtinput.style.width = "80%";
           input_sec.appendChild(txtinput);
 
           // img url input
@@ -783,7 +781,6 @@
         subtitleinput.classList.add('subsrc', `subsrc${i}`);
         subtitleinput.value = "";
         subtitleinput.setAttribute('placeholder', `Subtitle`);
-        subtitleinput.style.width = "80%";
         input_sec.appendChild(subtitleinput);
 
         // text input
@@ -793,7 +790,6 @@
         txtinput.classList.add('txtsrc', `txtsrc${i}`);
         txtinput.value = "";
         txtinput.setAttribute('placeholder', `Line`);
-        txtinput.style.width = "80%";
         input_sec.appendChild(txtinput);
 
         // img url input

styleMV.css

@@ -698,7 +698,9 @@ footer {
   display: none;
 }
 
-#msform input[type="text"].imgsrc {
+#msform input[type="text"].imgsrc,
+#msform input[type="text"].txtsrc,
+#msform input[type="text"].subsrc {
   width: 80%;
 }
 
@@ -1302,6 +1304,31 @@ body {
   }
 }
 
+@media screen and (max-width: 576px) {
+  #msform input[type="text"].imgsrc,
+  #msform input[type="text"].txtsrc,
+  #msform input[type="text"].subsrc {
+    width: 100%;
+  }
+
+  #msform .input-sec>input[type="text"]:nth-of-type(1) {
+    margin-top: 77%;
+  }
+
+  #msform .input_eng .input-sec>input[type="text"]:nth-of-type(1) {
+    margin-top: 90%;
+  }
+  
+  .upload-btn {
+    width: 100%;
+    height: 60%;
+  }
+
+  .input_eng .upload-btn {
+    height: 50%;
+  }
+}
+
 .home-btn {
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
 }