1

I am using the latest version of Chrome but getting an "Invalid Property" error in Dev Tools when using the CSS calc() function.

I have never really used it before so I am probably doing something wrong here although I can't see what. Hoping somebody can help me out with this.

Here is the code I have.

padding-top: calc(980px / 1980px) * 100;

This is used to work out the padding-top on a background image so that I can have a 16:9 ratio on a responsive background image.

The answer is 49.49%.

The rest of the code for this particular section of my css is as follows in case something is required for the CSS to work this out.

.hero{
/** Height 980px / Width 1980px * 100 -- Keeps image aspect at 16:9 **/
padding-top: calc(( 980px / 1980px ) * 100);

max-width:1980px;
background:url('images/default-bg.jpg') no-repeat center center #fff;
background-size:cover;

}

Hope that makes sense. I had a look at Can I use and it doesn't seem to be an issue not using a vendor prefix.

Another thing to note which might affect this is that I am using SCSS and Scout App. Should I just use SCSS calculations to do this instead?

Just wanted to use this css function as I have never used it before.

Thanks Dan

Daniel Winnard
  • 37
  • 7
  • instead of using pixels, try using calc(16em / 9em). – Shivani Shanishchara Jun 13 '17 at 10:48
  • Hi, I tried that too, but nothing happens and Dev Tools still says Invalid Property Value. – Daniel Winnard Jun 13 '17 at 10:53
  • if `.hero` is a full width element you could simply define `height: 0; padding-bottom: 56.25%` to create a 16:9 container. if not, then assign that style to its `::before` pseudoelement – Fabrizio Calderan Jun 13 '17 at 10:55
  • I just wanted to see if there was a dynamic way to do this without hard coding the answer. Thought using calc() in this way if I changed the height or the width it would re-calculate the % value of the padding-bottom – Daniel Winnard Jun 13 '17 at 10:58
  • so you are still hardcoding the height or width – Fabrizio Calderan Jun 13 '17 at 10:59
  • Yeah I suppose I am. I guess in this case I may as well just use what you suggested above. Thanks for the help. I will mark this answer as sorted. – Daniel Winnard Jun 13 '17 at 11:01
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Jun 13 '17 at 11:03
  • @DanielWinnard, check out my answer, you don't have to hardcode that. – JoannaFalkowska Jun 13 '17 at 11:20
  • You should only use `calc()` when depending on element or viewport size/orientation to change the computed value. In your case, you don't. It will always result in `padding-top: 49.494949%;` and that's exactly what you should use, to make sure it also applies for the [~6% browsers](http://caniuse.com/#feat=calc) that don't have support for calc() – tao Jun 13 '17 at 11:50

5 Answers5

1

You cannot divide by units, only by numbers.

Lars Beck
  • 3,446
  • 2
  • 22
  • 23
  • I'm tried changing 980px / 1980px * 100% but still got errors. – Daniel Winnard Jun 13 '17 at 10:55
  • 2
    If it contained a valid code version, which would have taken you less than a minute to write, it would have been `+1` from me. But in its current form, it's the perfect example of a bad answer. @DanielWinnard, this is what Lars means `padding-top: calc((980px / 1980) * 100)`. And it's the correct answer. If you divide `px/px` your result remains unitless, right? Here's a simpler version: `calc(98px / 19800)` – tao Jun 13 '17 at 11:11
  • @AndreiGheorghiu I’d say it’s a semi-perfect example of a bad answer as I could have just answered with the link to MDN, yet you’re right and got my upvote :) – Lars Beck Jun 13 '17 at 11:20
0

You are using

padding-top: calc(980px / 1980px) * 100);

Use following

padding-top: calc(980px / 1980 * 100);

calc guide

Posting a working example

.box {
  width:500px;
  height:500px;
  background:tomato;
  padding-top: calc(980px / 1980 * 100);
}
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque molestiae, quos mollitia dolorum id eaque in repellendus? Quae itaque numquam ipsa quasi eos, ea ullam at vero perspiciatis velit? Nesciunt.
</p>
</div>
LKG
  • 4,152
  • 1
  • 11
  • 21
0

You can get what you want by this....

padding-top: calc(980px / 1980 * 100);
Dhruvil21_04
  • 1,804
  • 2
  • 17
  • 31
0

You don't need to use px as unit at all. Dividing px/px will result in no unit so no point to put that into the calculation. Simply go with:

padding-top: calc(980 / 1980 * 100%);

I just tested and it works fine in Chrome.

JoannaFalkowska
  • 2,771
  • 20
  • 37
  • This changes the expected output, by changing the unit from `px` to `%`. Most likely, it's not what the OP wants. – tao Jun 13 '17 at 11:18
  • Expected answer IS in `%`. Quote: "The answer is 49.49%". With an explanation that this is for padding-top responsive aspect ratio trick, which totally makes sense to me. – JoannaFalkowska Jun 13 '17 at 11:19
  • @AndreiGheorghiu you are wrong. The rule in my answer does work and properly sets element's padding-top to 49.49% of its width. You may want to read this question: https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css. This trick works for padding-top and padding-bottom alike. Also please stop tagging me in comments and then removing them. – JoannaFalkowska Jun 13 '17 at 11:27
  • There's one thing I still do not get. Why not use `padding-top: 49.49%;`? At least it works in more browsers than `calc()` and the above method is still hard-coding, but using a more verbose syntax. – tao Jun 13 '17 at 11:29
  • You would need to ask OP about that, it depends on your personal requiremens regarding browsers and code quality. It seems like all the modern browsers besides IE11 handle it fine: http://caniuse.com/#search=calc – JoannaFalkowska Jun 13 '17 at 11:32
  • What I personally think is that OP should use some CSS preprocessor instead of computing this thing in browser, but that's not my call to make : ) – JoannaFalkowska Jun 13 '17 at 11:33
  • Since this does not add any flexibility to the solution (values are not dynamical) it makes absolutely no sense to prefer the `calc()` syntax, unless the purpose is to exclude IE users from seeing this as intended. – tao Jun 13 '17 at 11:35
0

Even though the calc() function allows using different units, you should divide by unitless numbers. For example:

width: calc(500px / 50 *2)

There is a great article explaining the calc() function here.

Nesha Zoric
  • 6,218
  • 42
  • 34