Content will adjust to the screen size after a specific re-sizing

When the width is under 1024, I want the body of the page to scale to fit the user's screen without a scrollbar. My goal is to adjust the entire body so that it fits within the browser window without a scrollbar when the width is under 1024. I attempted the following approach:

function resizeWindow() {
   $(window).off('scroll');

   windowWidth = $(window).width();
   console.log(windowWidth);
     if (windowWidth > 1024) 
     {
         console.log(">1024");
     }else if (windowWidth <= 1024) 
     {
       $('body').css('height', '100vh');
       $('body').css('width', '100vw')
     }
}

$(window).resize(resizeWindow);

CSS:

body, html {
 height: 100%;
 width: 100%;
}

Answer №1

Implement the @media query.

@media only screen and (max-width: 1024px) {
  body, html {
    height: 100vh;
    width: 100vw;
  }
}

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

Verify whether an AJAX request or HTTP connection is currently in progress

One of the functionalities on my website involves a long polling jQuery AJAX function. This particular AJAX call has a time-out of 50 seconds and then runs again, continuously checking for any changes on the server. However, there are instances when the l ...

Limiting the jQuery UI Datepicker to only allow past dates: How to make it happen?

I have implemented a jQuery UI Datepicker that restricts selection to only Sundays. However, I want to further enhance this by preventing users from selecting any dates in the future starting from today. Below is the current code snippet I am using for th ...

What steps are involved in linking Java with JavaScript?

After attempting to connect html and javascript using applet, unfortunately it was unsuccessful. I am curious if there is an alternative method besides applet to establish this connection. ...

How can I install fs and what exactly does it do in JavaScript?

As a beginner in the world of JavaScript, I am struggling with what seems like a basic issue. In my journey to develop some JavaScript code and utilize sql.js, I keep encountering an error at this line: var fs = require('fs'); This error is due ...

Is there a way to create a rectangle shape and connect it with data from a Json file on a page

Is it possible to draw rectangles on a page.aspx? For example, by using data from a JSON object like {name:Food;name:Candy;name:Water;name:Meat;......}, where each rectangle corresponds to the count of different data names. If there are 4 names in the data ...

Axios failing to include Content-Type in header

I have set up an Odoo instance in the backend and developed a custom module that includes a web controller. Here is the code for the web controller: Web Controller # -*- coding: utf-8 -*- from odoo import http import odoo from odoo.http import Response, ...

Find the variance between the initial time and the present time, as well as the final time and the current time

If a user logs in before the start time of a game, they will receive a message indicating that the game will start in 01h:10m:23s. If the user logs in after the start time but before the end time, they will see a message stating that the game closes in 0 ...

Mapping an array based on specific conditions

When using my photo gallery app, I faced a challenge in mapping an array of images based on the user-selected album name. The current setup works perfectly for the 'Cambodia' album where all images are correctly logged in the console after mappin ...

The initial call to the method results in an undefined return value

In my code, there is a function that retrieves distinct values from a database. Here's how it looks: function getUniqueCategories(res, req) { query = `SELECT DISTINCT name FROM product_category;`; connection.query(query, function (err, rows) { ...

Ways to create a unique animation for reducing the width of a div in a specific direction?

Currently, I have managed to animate the decrease in width of a div element. However, it is currently decreasing from right to left, and I would like it to decrease from left to right instead. Can someone please provide guidance on how to achieve this? ...

acquiring jQuery object property tied to a model-bound element

I have a viewmodel that contains a list of objects which I am currently iterating through. Each object has a specific class associated with it. My objective is to open up the item for viewing upon clicking on it. However, I am unsure of how to retrieve the ...

What is the best way to pass multiple variables to a PHP file with AJAX using a GET request?

Can you help me figure out how to send both an I.D. value and a name value to a php file using ajax? Currently, I am successfully sending just the I.D. variable, however, when I attempt to add the name variable, the function stops working. The code that w ...

Filtering a table using jQuery based on the class or data attributes

Issue arises when selecting the first "Icon" shows "Not found", then opting for "Talisman" does not display. It should show "Not Found". Is this achievable? Add the classes f-Icon, f-Ring, f-Neck. Then search for the value by class. Select either "Icon R ...

The enigmatic "margin-30" element within adaptable layout design

Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this pro ...

What is the best way to make a linear gradient that spans the entire vertical space that is visible (or shifts to a solid color)?

I'm trying to figure out how to apply a linear gradient to the body element of my webpage. Here's the CSS code I've been using: body { background: linear-gradient(0deg, white, lightgray); } The issue I'm facing is that the gradien ...

Will using lengthy CSS custom property names impact the performance of a website?

I've been contemplating experimenting with projects that aim to shorten CSS variables in order to decrease the size of my CSS file. How do long CSS custom property names impact page performance? Reduction in CSS file size (including compression) Imp ...

Utilize Javascript and JQuery to implement sending a custom header in an OPTIONS preflight API request

Snippet: $.ajax({ type: 'GET', dataType: 'json', url: api, xhrFields: { withCredentials: true }, beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Basic [my auth token]"); }, ...

Generating PNG images with text using Node.js

I am currently working on generating a PNG file to be sent to clients through HTTP as an image/png response type. This new file will be created by combining 3 base PNG files and inserting custom text in the center of the image. Unfortunately, I have not ...

Next.js triggers the onClick event before routing to the href link

Scenario In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables. Objective I aim to trigger the onClick function before navigating to the href location. The Code I'm Using <Link href={`/sess ...

Angularjs scope throws TypeError when attempting to add an array

As someone diving into the world of Angular and JavaScript, I am tackling the challenge of creating a directive that requires adding an array to the directive's scope. Here's a snippet of the code for my directive: .directive("startupSections", ...