Expand the size of the card box with CSS to create a larger and more prominent display

I recently came across a snippet of Javascript and CSS code.

Here is the Javascript:

$('.item-card').css("width", $('.item-card').width() + "px");
$('.item-card').css("font-size", $('.item-card').width() * .13 + "px");

And here is the CSS:

  margin-left: 1vw;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  right: -15%;
  width: 10vw;
  display: inline-block;
  position: relative;
  white-space: normal;

While this CSS creates a visually appealing box for displaying items, I am facing a challenge. I want to make the box bigger by adjusting the width, but changing the width value seems to have no effect. How can I successfully increase the size of the box while maintaining its current stylistic attributes?

javascriptjqueryhtmlcss

Answer №1

The current code you are using only converts the width from "vw" units to "px" units, without actually adjusting the on-screen width.

If you wish to change the size of the box, you will need to perform a calculation before setting the width property again:

// double the width
$('.item-card').css("width", $('.item-card').width() * 2 + "px");

Don't forget to adjust the 'height' property as well if you want to maintain the same aspect ratio of the box.

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

Filtering dropdown lists using JQuery

One of my drop down menus labeled ddl1 has the following options: Bus Bike The second drop down menu ddl2 displays: Bus Mercedes Bus Ford Bike Honda I am looking for a script that can refine the options in the second dropdown based on the selection i ...

jquerydom-manipulation

Tips for creating a sticky bootstrap column that remains in place as you scroll

I am looking to design a FAQ page similar to Twitter's FAQ. The goal is to have the left column remain fixed in its position while allowing users to scroll through the content. Here is what I have attempted so far, but it is not functioning as expect ...

cssvue.jsbootstrap-4scroll

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

The occurrence of "Error [ERR_STREAM_WRITE_AFTER_END]" was noted when trying to write to an HTTP server in

How to set up a new http server using Node.js After launching the server, the initial HTML text is displayed correctly. However, moving to other links in the code (e.g., localhost:5001/about) results in an error appearing in the IDE console. events.js:377 ...

javascripthtmlnode.jsexpress

Bootstrap version 5.3.0 has a unique behavior where dropdowns placed outside the collapsed area of the navbar will display the menu inside the navbar, rather than outside

Is there a way to fix the issue where the dropdown menu appears in the body of the navbar when it is collapsed? I have tried using attributes like data-bs-reference but couldn't find much information on how to resolve this. <nav class="navbar ...

csstwitter-bootstrapdropdownbootstrap-5

Managing the automatic download of a zip file through JQuery - A guide

When working with a REST API and creating a zip file for forced download, the task is to call the API by sending necessary POST data through JQuery to initiate the download. How can this goal be accomplished effectively? ...

javascriptphpjqueryrest

What is the best way to select the element where a user has clicked using JavaScript?

Referencing a previous question on Stack Overflow, the goal is to track user clicks in a Firefox browser using JavaScript. The provided JavaScript code almost achieves this: var DocElements = document.getElementsByTagName('*');for(var i = 0; i & ...

javascripthtmlfirefoxselenium

"Utilize jQuery to make a call to a webservice

I created a java webservice and I am attempting to access it through jquery ajax, but I am only receiving the HTML page generated when calling the WSDL. Here is the snippet of JSP code: checkLogin = function () { $.ajax({ ur ...

javajqueryweb-servicesjax-ws

Vue/Vuex - using async dispatch for AJAX requests in multiple components

I am working with vuex and using a store module to load user lists in my app through ajax. After the list is loaded, it doesn't fetch again if it's already present in the vuex store. I have implemented this logic in the main application layout as ...

javascriptajaxvue.jspromisevuex

Why is IE6 adding an additional margin of 50px? My code seems to be causing this issue

Currently I am working on creating a custom IE6 CSS. However, I am facing an issue where an extra 50px is being added to the header div. Even though I have set the header size to 109px, it is displaying at 159px. When I add any element below the header div ...

htmlcssinternet-explorer-6

Steps for preventing form submission when the username is unavailable

After checking the availability of the user name, I encountered an issue where the form still gets submitted even if the username is not available. Updated Code: <SCRIPT type="text/javascript"> $(document).ready(function(){ $("#emailch").change(fu ...

phpjavascriptjqueryhtmlajax

What is the purpose behind certain developers specifying font size twice using different units?

When creating website themes, I often come across developers defining properties twice with different units. For example: body, button, input, select, textarea { color: #404040; font-family: sans-serif; font-size: 16px; font-size: 1rem; ...

htmlcss

How to display a video with full height and width using CSS or JavaScript

I am trying to incorporate an html5 video (using the video tag) with 100% width and 100% height to play in the background. I have seen an example using an image, but I want to achieve the same effect with a video. Here is the code I have so far: #video { ...

javascriptcsshtml

What is the best way to calculate the variance between the most recent and previous data points in an array in the span of an hour using JavaScript

Here is an array of objects I am working with: 0: {time: '2021-12-02T23:53:54.062Z', value: 558316} 1: {time: '2021-12-03T00:53:53.959Z', value: 558452} 2: {time: '2021-12-03T01:53:53.934Z', value: 558588} 3: {time: '2021 ...

javascriptarraysangulardatetimedifference

Remove explicit ASP.NET validation control group using JavaScript

To validate a particular group, you can utilize the following code: Page_ClientValidate('validationgroup'); If you wish to reset all validations on a page, you can use the code below: Page_ClientValidate(''); Although this method w ...

javascriptasp.netrequiredfieldvalidator

Using Google Apps Script to retrieve post data from a web application through the `doPost` method

https://i.sstatic.net/2HpSJ.jpg When trying to access formIDArray in my appscript, it returns nothing. How can I properly access the object "FormIDArray[]" from the appscript environment? ...

javascriptarraysobjectgoogle-apps-script

Error: Module 'mongoose' not found

I have successfully created a basic CRUD API using nodeJS, express, and mongoDB. Everything was working smoothly until I decided to enhance the security by storing password hashes instead of plain text passwords. To achieve this, I integrated the bcrypt np ...

javascriptnode.jsmongodbexpressmongoose

Guide on how to update a div element without losing submitted information with the help of AJAX and PHP

After creating two HTML pages that incorporate AJAX refresh div tag code and use $_POST to post data from one page to another, I encountered a situation where the PHP page would retrieve data from a MySQL table. Let's take a look at the code I utilize ...

phpjavascriptmysqlajaxdatabase

Struggling to reset the jscrollpane scroller

When using jscrollpane in my horizontal division to enable scrolling, I encounter an issue when loading data with ajax. The scrollbar doesn't appear until the browser width is changed. To address this, I currently utilize the following method to rein ...

javascriptajax

The state in a functional component in React fails to update after the initial axios call

Issue : The value of "detectLanguageKey" only updates after selecting the language from the dropdown twice. Even after selecting an option from the dropdown for the first time, the detectLanguageKey remains empty and is only updated on the second selectio ...

javascriptreactjsreact-hooksreact-functional-component