Is it possible to eliminate units from a calculation function within CSS code?

I've been working with the rule below:

margin-left: calc(((100vw - 624px) / 144) * 5);

At a viewport width of 1200px, this translates to 20px. However, I would prefer to have a result of 20%. To achieve this, it would be ideal to change the integer multiplication factor '5' into '5%'. This modification requires removing units from the other parts of the equation so that calc processes 4 * 5% instead of 4px * 5.

In SASS, dividing by 1px is an option, whereas in calc division can only be done with numbers, not unit values.

Is there a method for eliminating units from a segment of a calc function?

csscalc

Answer №1

While SASS and other CSS preprocessors offer a convenient strip-unit function, CSS3 does not currently have an equivalent built-in feature for removing units from values.

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

How can I arrange multiple images within a div to create a circular view?

How can I create a div block with multiple images positioned inside? I'm having trouble applying div CSS properties to the images, and also want them to be displayed in round shapes. ...

imagecssposition

Creating a responsive two-column grid in Bootstrap 4.4 is a straightforward process that

Currently using Bootstrap 4.4.1. Experimented with a 2-column layout: Image on the left and Text on the right. <section class="resume-section-first p-3 p-lg-5 d-flex align-items-center" id="about"> <div class="w-100"> < ...

cssbootstrap-4grid-layout

Troubleshooting problem with CSS layout when adjusting the height of a section

I recently delved into creating a simple website using HTML5 and have successfully set up the site structure. Everything has been smooth sailing so far. However, I've encountered a section of the site that seems to have a mind of its own. When I ass ...

csshtml

Sliding and repositioning elements using jQuery

My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop. I've written some code that makes the slides move, but I'm struggling to set the correct position for ea ...

javascriptjqueryhtmlcss

What are the steps to create a responsive Coin Slider?

Once the slider is generated, it appears that there is no built-in method to resize it, causing issues with responsive design. Is there a way to adjust the size of the Coin Slider plugin based on the media queries in Twitter Bootstrap 3? Take a look at C ...

javascriptjquerycsstwitter-bootstrap-3responsive-design

Design an interactive div element that allows users to modify its content, by placing a span

Here is an example of the desired effect: ICON LINE - 1 This is some sample text inside a div element and the next line should begin here ICON LINE - 2 This is some sample text inside a div element a ...

javascripthtmlcss

Tips for successfully transferring an image through an XMLHttpRequest

I found this helpful resource at: I decided to test out the second block of code. When I made changes in the handleForm function, it looked like this: function handleForm(e) { e.preventDefault(); var data = new FormData(); f ...

javascriptphpjqueryhtmlcss

Is it possible for CSS div to have a height of 100% when placed within fluid parents

When the parent div's height is set to 100%, you can also set the child to 100% and it will function correctly. However, if the parent's height is determined by its content, the height attribute does not work as expected. Are there any effective ...

css

Unable to eliminate the right margin using CSS

I'm having an issue with the live server where I've tried adjusting various elements like setting margin-right to 0px, decreasing padding, etc., but nothing seems to fix the problem. Everything is scaled properly but there's an overflow that ...

htmlcss

Adjust the font size within the grid layout

I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 t ...

htmlcssbootstrap-4

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

javascriptjqueryhtmlcssgoogle-chrome

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

htmlcss

The state of the Toggle Button in Material UI

I am currently working with Material UI's ToggleButton and ToggleButtonGroup components. However, I'm facing an issue where the ToggleButton remains highlighted even after clicking on another button in the group. While the buttons are registering ...

javascriptcssreactjsmaterial-ui

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

Choose CSS Option

I need assistance with customizing my dropdown select option - see the example below <select> <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option> <option value="saab">Saab</option> <option val ...

htmlcsstooltiphtml-select

Text directly in the middle

Explanation In an attempt to replicate the "middle centered text" feature, such as "Responsive Front-end Development," on this website, I am currently exploring various methods. As a newcomer to web development, I have searched for templates to provide me ...

htmlcsstwitter-bootstrap

What is the best way to horizontally center a div with the layout attribute set to "row"?

I am currently working with a grid composed of cards from the Angular Material library. The issue I am facing is that the cards have a fixed size, which results in extra space on the right immediately after wrapping. My goal is to eliminate this space by ...

cssangularjsangular-material

The burden of a CSS or jQuery file

Having trouble finding the right keyword to search for the answer to my question on Google, I've decided to ask it here instead. If I only use a portion of the classes or IDs from Bootstrap CSS or any other framework in my HTML file, will all the CSS ...

cssperformance

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

htmlcssscrapy

What is the best way to merge different sets of CSS media queries?

In CSS Media queries, you have the option to use , (for "or") and and to meet media query criteria. For instance: @media (min-width: 768px) and (min-resolution: 2dppx) { ... } But what if you wish to combine and and , within the same media query? An exam ...

cssmedia-queriesretina-displaydevicepixelratio