Adjust the size of a division based on the width of the screen using JavaScript

Is there a way to create a JavaScript function that dynamically adjusts the size of a div, image, or padding based on the screen width without using CSS?

I am specifically interested in adjusting the padding of a div element.

Here is a sample code snippet to achieve this:
@media(min-width: 300px) and (max-width: 399px) {div.hero-position {padding-top: 58px; padding-bottom: 36px;}}
@media (min-width: 400px) and (max-width: 499px) {div.hero-position {padding-top: 71px; padding-bottom: 48px;}}
@media (min-width: 500px) and (max-width: 599px) {div.hero-position {padding-top: 82px; padding-bottom: 60px;}}
@media (min-width: 600px) and (max-width: 699px) {div.hero-position {padding-top: 98px; padding-bottom: 72px;}}
@media (min-width: 700px) and (max-width: 799px) {div.hero-position {padding-top: 99px; padding-bottom: 84px}}
@media (min-width: 800px) and (max-width: 899px) {div.hero-position {padding-top: 116px; padding-bottom: 96px;}}
@media (min-width: 900px) and (max-width: 999px) {div.hero-position {padding-top: 124px; padding-bottom: 108px}}
@media (min-width: 1000px) and (max-width: 1099px) {div.hero-position {padding-top: 118px; padding-bottom: 120px;}}
@media (min-width: 1100px) and (max-width: 1199px) {div.hero-position {padding-top: 140px; padding-bottom: 132px;}}
@media (min-width: 1200px) and (max-width: 1299px) {div.hero-position {padding-top: 174px; padding-bottom: 144px;}}
@media (min-width: 1300px) and (max-width: 1399px) {div.hero-position {padding-top: 203px; padding-bottom: 156px;}}
@media (min-width: 1400px) and (max-width: 1499px) {div.hero-position {padding-top: 218px; padding-bottom: 168px;}}
@media (min-width: 1500px) {div.hero-position {padding-top: 239px; padding-bottom: 180px;}}
javascripthtmlcss

Answer №1

Have you considered using a more efficient CSS approach? Utilizing the vw unit allows you to establish padding relative to the viewport (screen) width:

div.hero-position {
  padding-top: 3vw; /* 3% of width */
  padding-bottom: 2vw; /* 2% of width */
}

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 resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

When using import {Injectable} from '@angular/core';, does the module attribute in package.json point to a file that exports injectable? Also, for the format @angular/core/testing, is there a testing folder within @angular/core that contains anot ...

javascriptangularnpm

Navigable Vuetify Tabs with routing capabilities

Within my Vue application, I have a page that contains various tabs. My goal is to display different tabs based on the routes being accessed. To achieve this functionality, I followed an answer provided in this link. Overall, it's working well! I ca ...

javascriptvue.jstabsvuetify.jsvue-router

What is the best way to establish a connection between the same port on Expressjs and Socket.io

I am currently using Express.js and Socket.io to develop a chat application. Initially, I created my project with Express-Generator and began by running the node ./bin/www script. However, I decided to remove the ./bin/www file and instead combined it wit ...

javascriptnode.jsexpresssocket.io

How can I modify the color scheme of radio buttons to include a variety of different hues?

Is there a way to customize the colors of my radio buttons with three different options? I want numbers 1, 2, and 3 to be red, number 4 to be orange, and number 5 to be green... Here is the code I am using: /* Option 1 */ input[type='radio'] { ...

css

Activating gzip compression using fetch.js

I am utilizing fetch.js (https://github.com/github/fetch) to transmit a rather substantial JSON object to the backend. The size of the JSON is significant due to it containing an SVG image string. My question is whether fetch.js applies gzip compression a ...

javascriptjsongzipfetch-api

Step-by-step guide to building multiple layouts in React.js using react-router-dom

For my new web application, I am looking to create two distinct layouts based on the user type. If the user is an admin, they should see the dashboard layout, while employees should be directed to the form layout. Initially, only the login page will be dis ...

javascriptreactjsreact-router

personalized options for initiating and concluding html audio component

I am currently facing an issue with my html audio element that plays a track. The setup is quite straightforward: <audio controls loop="loop"> <source type="audio/wav" src="song.wav"> </audio> However, I need to create custom start ...

javascripthtmlgoogle-chromeaudio

What is causing this issue with the ajax call not functioning correctly?

$(document).ready(function(){ $('.clickthetext').click(function(){ $.post("submit.php", $("#formbox").serialize(), function(response) { $('#content').html(response); }); return false; }); ...

javascriptphpjqueryajax

What is the best way to limit a slash command to only be accessible to those with specific roles on a Discord server?

I am currently working on a discord bot using Discord.js V14 and implementing a command called "claimticket". However, I am facing an issue where I need to restrict this command to only members who possess one of the two specific roles that I have mentione ...

javascriptdiscorddiscord.js

Integrating React js with Layout.cshtml: Mastering the Fusion of React Routing and ASP.NET MVC Routing

My current project involves an ASP.NET MVC core application with the View written in cshtml. The routing follows the conventional asp.net mvc routing pattern. However, I've recently implemented a new module using React JS. Now, I'm faced with the ...

javascriptasp.netasp.net-mvcreactjsroutes

What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated som ...

javascripthtmlcss

When attempting to toggle the view on button click, it is not possible to select a shadowRoot

I am facing an issue with my parent component named ha-config-user-picker.js and its child component called edit-user-view.js. Parent Component: It contains a mapping of users and includes the child component tag along with its props. When a click event i ...

javascriptpolymershadow-dom

Issue with Angular Factory not being invoked

I am currently using a tutorial to create a MEAN app with Google Maps. However, I have encountered an issue where the map is not appearing on the page. Surprisingly, there are no errors in the browser console and even when debugging with node-inspector, I ...

javascriptangularjsnode.js

Changing textarea html content to an iframe in real time with the use of jQuery

Is it possible to use jQuery to transfer HTML content entered into a textarea to an iframe in real time, without refreshing the page? I have searched for a solution but have not found a clear direction. Any code snippet and explanation would be greatly ap ...

jqueryhtml

Collapse the hamburger menu upon clicking on a link in the mobile menu

Whenever I click on a menu item, the page loads but the menu remains open. This JSX code represents the Mobile Menu: const MobileMenu = () => { const navigation = [ { link: '/applications', text: 'Applications' }, { link ...

javascriptreactjsnext.js

I would like to use a tabset row to showcase buttons in Angular 2

I need to arrange a tabset and buttons in a single row. The tabset is already displayed, now I just need to add the buttons. <div class="form-group col-sm-8 "> <div class="col-lg-8" style="margin-top:35px;" > <h6 class="text-rig ...

htmlcssangular2-routingangular2-directives

Tips for concealing a "PARTICULAR TAB BAR ITEM" on a bottom tab bar in @react-navigation/bottom-tabs

Check out this video displaying my current visible bottom tab items: Home, My Account, Cart, and Menu. Watch here I have additional bottom tab items like SettingsView that I want to render on the screen but keep them hidden from the bottom tab bar itself. ...

javascriptreactjsreact-native

Remove specific data from jQuery datatables using data attribute

My jQuery datatable is loaded with data from a database without any filtering by default, providing all the necessary information for users. In addition to the built-in search functionality of jQuery datatables, I have incorporated custom search input fiel ...

javascriptjqueryhtmldatatables

How can we make the lines in the Highcharts force plot take up all the available width

Our design team has specifically requested that our stacked area charts fill 100% of the chart width, instead of stopping at the tick marks. To illustrate this, they have provided a mockup: View Mockup Currently, our chart does not extend to the full wid ...

javascriptjqueryhighcharts

Scroll to the top of a new page with Material UI's table component

Feeling a little stuck here. I've tested various settings with scrollTop, but haven't had much luck. To clarify, I'm working with Material UI and their pagination features in conjunction with a table (you can find the documentation here). W ...

javascriptreactjsmaterial-ui