css-calc Questions
9
Solved
Is there any way to use or implement modulus operator in css calc function?
I know there is mod operator and IE supports it, but what about other browsers?
For example
#element-id{
width: calc(...
4
Solved
can I use the n variable inside a calc expression?
For example:
.child:nth-child(n) {
margin-left: calc(n * 46px);
}
My Code:
<div class="share-buttons">
<div class="share-button-ma...
3
Solved
Is it possible to use calc() to multiply or divide with unit-based values (like 100%, 5px, etc).
For example I was hoping to do something like this:
width: calc(100% * (.7 - 120px / 100%));
Hop...
6
I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function.
I've done this function with javascript but i'm interested ...
3
I have relatively complex formulas e.g. transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
how do I debug c...
Beason asked 18/11, 2018 at 18:30
2
Solved
Is it possible to use calc() function in CSS to manipulate hexadecimal color value?
In following CSS snippet I would like to use --enable variable to switch between two hexadecimal color values fo...
Atheroma asked 27/6, 2018 at 13:5
2
The title says it all.
I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic.
Is it the same as the biggest number in JavaScript?
When I try this with transform th...
Cathryncathy asked 31/8, 2020 at 8:33
3
Solved
Let me start by showing you how I would do this in SCSS:
$submenu-padding-left: 1.5em;
transform: translateX(calc(-#{$submenu-padding-left} + .5em));
which would compile to:
transform: transla...
Hanse asked 6/2, 2018 at 9:43
5
I have CSS function like below:
width: min(calc(100vw - 51rem), calc(100vh - 2rem));
It's working fine when using a CSS file but not when used in SASS. How can I rewrite this function for SASS?
...
5
Solved
The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating
body { width: calc(100% - 250px - 1.5em); }
into
body { width: calc(-151.5%); }
Which is obviou...
Heroic asked 15/8, 2012 at 15:15
3
I'm testing a CSS framework for specifying numbers via micro-classes. For instance, something like <div class="fifty percent wide"> might translate into width: 50%. The implementation uses CS...
Finedrawn asked 15/11, 2016 at 6:47
5
@media screen and (max-width: calc(2000px-1px)) {
.col { width: 200px; }
}
The value after subtraction should be 1999px, however it does not seem to be working. If I manually change it to 1999p...
According asked 15/5, 2014 at 0:10
6
I have the following situation:
div {
width: calc((100% / 11) - 9.09px);
}
In the context, 100% = 1440px, and 9.09px is generated in mathematics with sass.
The results is: 94.55px, because calc r...
2
Solved
Lets assume to have the following CSS:
.box {
width: var(--box-size);
height: var(--box-size);
border: 1px solid red;
}
.box--larger {
--box-size: 66px;
}
.box--larger1 {
--b...
Cataplasia asked 2/8, 2018 at 18:36
3
Solved
I wanted to set margin to auto plus some pixel amount using calc(), but my code doesn't seem to work.
selector {
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
backgro...
4
In SASS my Calculation looks like calc(50% - 375px); But when it compiles the CSS output looks like that: calc(-325%), which is obviously not what I had in mind.
How can I force SASS to not do th...
2
While specifying a percentage value in css calc, how does calc know whether I am referring to width or height?
.container {
width: calc(100% - 2vw); // 100% here is width or height ?
}
One may...
5
Solved
We have now started using calc() in css, for setting widths on a result of calculation.
For example:
<div id='parent'>
<div id='calcWidth'></div>
</div>
#parent{
width...
4
Solved
I have made a custom progress bar, consisting of three separete parts (a uniquely customisable center piece, a left part and a right part) but I'm having difficulty aligning the center block correc...
Xerox asked 14/5, 2021 at 23:26
5
Solved
I have the following code which works great with centering my content until the vh is less then 650px. I was wondering if there was a way to make this value never go below 0 only using CSS calc.
....
6
Solved
Can someone tell me why this CSS calc function isn't working? When I inspect element on Chrome, it says 'Invalid property value'.
width: calc((100vw - 14px * 2) / (270px + 11px * 2));
1
Solved
I want to have a basic HSL color value which I want to implement as a gradient as follows:
:root {
--hue: 201;
--saturation: 31;
--lightness: 40;
--mainColor: hsl(var(--hue),var(--saturation),...
Hyperbaric asked 28/12, 2020 at 13:26
1
Solved
I am using css calc function from css-tricks
calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));...
2
Solved
Can I use the css calc() function when setting positions in JavaScript?
ePopup.style.top = "calc(100px - 1.5em)";
Ellie asked 29/11, 2016 at 16:40
1
Solved
I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px). I've tried several variations...
1 Next >
© 2022 - 2024 — McMap. All rights reserved.