How do I create a javascript script that resizes the width of a form in CSS?

Question

Basically, what I am trying to do is create a form for people to enter their emails into to get sent some info. I want to create one html file for both desktop and mobile views such that the width of form takes up 75% of the screen when the window is narrow and 35% when the window is wide. My script right now creates the correct size window when the html document is first loaded, but when I resize the window it doesn't resize it. What did I do wrong with my code?

<div id="center" class="container-fluid" font-size=13px; onresize="resize()">
           <script>
              out = "75%"
               if (window.innerWidth > window.innerHeight){
                   out = "35%"
               } else{
                   out = "80%"
               }                  
              document.getElementById("center").style.width = out;
              document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};
              function resize(){
              out = "75%"
               if (window.innerWidth > window.innerHeight){
                   out = "35%"
               } else{
                   out = "80%"
               }

              document.getElementById("center").style.width = out;
              }
           </script>
</div>

Abraham Murciano Benzadon · Accepted Answer · 2018-07-10 23:34:09Z

2

Use CSS media queries.

Put the following in your CSS:

.email-form {
    width: 75%;
}

@media only screen and (max-width: 768px) {
    .email-form {
        width: 35%;
    }
}

answered Jul 10, 2018 at 23:34

Abraham Murciano Benzadon

1,75219 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Programnik · Accepted Answer · 2018-07-10 23:37:34Z

1

You need to hook this code to the events which occur when the window is resized. Put the code into a function, then call the function from the window load and window resize events, eg:

function ResizeMe(){
        // code here as above
  }

window.onResize = ResizeMe;
window.onload = ResizeMe;

answered Jul 10, 2018 at 23:37

Programnik

1,5591 gold badge10 silver badges15 bronze badges

Collectives™ on Stack Overflow

How do I create a javascript script that resizes the width of a form in CSS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related