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

Improve this question
9
  • instead of using pixels, try using calc(16em / 9em). Commented Jun 13, 2017 at 10:48
  • Hi, I tried that too, but nothing happens and Dev Tools still says Invalid Property Value. Commented Jun 13, 2017 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 Commented Jun 13, 2017 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 Commented Jun 13, 2017 at 10:58
  • so you are still hardcoding the height or width Commented Jun 13, 2017 at 10:59

5 Answers 5

Reset to default
1

You cannot divide by units, only by numbers.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I'm tried changing 980px / 1980px * 100% but still got errors.
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)
@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 :)
0

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

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

Comments

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.

Improve this answer

7 Comments

This changes the expected output, by changing the unit from px to %. Most likely, it's not what the OP wants.
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.
@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: stackoverflow.com/questions/1495407/…. This trick works for padding-top and padding-bottom alike. Also please stop tagging me in comments and then removing them.
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.
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: caniuse.com/#search=calc
|
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>

Improve this answer

4 Comments

Hi, I tried this and I am still getting an error and nothing displaying.
Try padding-top: calc(100% / 1980px * 100); at once to check still live error
Yes I still get the error. I think I will have to concede and just do the calculation manually.
check my update answer it's working fine in chrome use padding-top: calc(980px / 1980 * 100);
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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.