Can you provide instructions on how to adjust the width of a form using a JavaScript script within a CSS file?

I am currently working on creating a form where individuals can input their email addresses to receive some information. My goal is to design one HTML file that will work seamlessly on both desktop and mobile views by adjusting the form width based on the window size. While my script initially sets the appropriate form width upon loading the HTML document, it fails to resize when I adjust the window size. What mistake did I make in my code?

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

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

Answer №1

To make your email form responsive, utilize CSS media queries.

Simply add the code snippet below to your CSS file:

.email-form {
    width: 75%;
}

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

Answer №2

To ensure the code is triggered when the window is resized, it must be connected to the corresponding events. Wrap the code within a function and then invoke this function using the window load and resize events like so:

function AdjustWindowSize(){
        // Your code goes here
  }

window.onresize = AdjustWindowSize;
window.onload = AdjustWindowSize;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for extracting information from cookies marked with "httpOnly: true"?

Interestingly, backend sends cookies in the following manner: jwt.sign( payload, process.env.JWT_SECRET, { expiresIn: 31556926 }, (err, token) => res .cookie("token", token, { httpOnly: ...

javascriptnode.jsexpress

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

javascriptjqueryhtmlcsssafari

JavaScript Routing with Multiple Files

I tried to access api.js from Routes.js, but I encountered an issue stating that the function my_function_in_api is not defined. Here is my code, could you please help me identify where the problem lies: Routes.js var val = require('file name') ...

javascriptangularjsjs-routes

What is the best way to showcase database values in a text-box using retrieval methods?

I am currently working on a database project that involves a webpage with 5 textboxes. One of these textboxes needs to display values from the database when it is in focus. I have the JavaScript and AJAX code to retrieve the data, but I am facing difficult ...

javascriptmysqlajaxjspnetbeans

Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows: <div class="span5 noMarginLeft"> <div class="dark"> <h1>Timeline</h1> <div class="timeline"> <div c ...

htmlcssangularjs

Utilize Optional Chaining for verifying null or undefined values

I have utilized the following code: data?.response[0]?.Transaction[0]?.UID; In this scenario, the Transaction key is not present, resulting in the error message: ERROR TypeError: Cannot read properties of undefined (reading '0') Instead of chec ...

javascripttypescript

Is it possible to duplicate native functions in JavaScript, such as window.alert or document.write?

I am looking to replace all instances of the alert function in my code with a custom alert message saying "you used alert". var hardCodedAlert = alert; //Although I understand this won't work. What other approach can I take? window.alert=function(){ ...

javascriptfunctionclonenative-methods

Utilizing $.Deferred() in a loop of nested ajax requests

I have spent countless hours searching for solutions to my problem, but I am still hopeful that someone out there has a solution. The issue at hand is being able to receive a notification once function a() has finished its execution. The challenge lies in ...

javascriptjqueryajaxdeferred

What is the process for executing JavaScript code that is stored as a string?

After making an AJAX call, I receive a random string (constructed dynamically on the server) that contains JavaScript code like: Plugins.add('test', function() { return { html: '<div>test</div&g ...

javascript

Is there a way to ensure that an image is always smaller than the section it resides in?

Currently, I am in the process of designing a Tumblr theme and have encountered an issue with the avatar image being displayed next to the content. The problem is that the image is larger than the section it's supposed to be contained in, causing it t ...

htmlcss

Creating the document.ready function in Angular2 with JQuery

I am seeking assistance to modify the JQuery function so that it can run without the requirement of a button click. Currently, the function only executes when a button is clicked. Code declare var jQuery: any; @Component({ selector: 'home-component ...

javascriptjqueryangular

Unpredictable hue of text

Is it possible to fill text with a combination of 2-3 random colors? ...

javascriptcssrandom

The start-up process of AngularJS applications with Bootstrap

Curious about the predictability of the initialization flow in AngularJS apps? Want to understand the order of execution of different blocks within an HTML document? I came across a question on bootstrapping in Angular JS, but it didn't delve into th ...

javascriptangularjshtmlexecution

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate ...

csslayoutmultiple-columns

Challenge with AngularJS data communication to Node Express server

Even though I should be using Angular 9, for this school assignment, I'm stuck with AngularJS. Within my html navbar, there is a search bar structured as follows: <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><input ...

javascriptnode.jsangularjsexpresshttp-headers

Extracting HTML elements between tags in Node.js is a common task faced

Imagine a scenario where I have a website with the following structured HTML source code: <html> <head> .... <table id="xxx"> <tr> .. </table> I have managed to remove all the HTML tags using a library. Can you suggest w ...

javascripthtmlnode.js

Design a table within an mdDialog that allows for editing of data presented in JSON format

I'm attempting to implement a dialog using JSON data. $scope.showAttributeData = function(data) { $scope.feature = data console.log($scope.feature) var that = this; var useFullScreen = ($mdMedia('sm') ...

javascriptangularjsangular-ngmodelangularjs-materialmddialog

What is the process for inserting a new row into ngx-datatable using data provided by the user?

Is there a way to dynamically add a new row to an ngx-datatable based on user input? A method I currently use to add an empty row includes this code snippet: addRow() { this.rows.unshift({unique_id: '<em>empty</em>', name: '& ...

javascriptangularngx-datatable

What is the process for including id parameters within the URL of an HTML page?

As I work on building a website with ReactJS and webpack, I encounter the need to access URL parameters. One specific challenge I face is creating a universal blog post view page that can be dynamically loaded based on the blog id parameter in the URL. Rat ...

javascripthtmlreactjs