0

I've been trying to do a complicated calculation in CSS to get rid of media queries on a page, and not require too many of them. The second part of the code below with the long decimal number is me trying to use a set number to calculate the percentage of something (a padding). That number almost perfectly represents the percentage needed per pixel of a view-port, so if I had a massive view-port it could still calculate the percentage or even an extremely small one. But since this number needs to be a percent and I can't just put a percent sign at the end. I needed to get it into a percent via pixels. Meaning calculate how many pixels the browser would calculate if it was a percent. I figured out to take the actual 100 percent width of the page and divide it by 100 to get 1% of the page in pixels. I then multiply that by the number we got for the percentage of the page in the second part of the calculation, giving me the actual pixel width as if it were a percent, and as if the browser had calculated this itself. This is the calc operation I used, that is not working properly:

 padding-left: calc((100% / 100) * (0.013641975308642 * 100vw));

It's not working and when we look with chrome dev tools, it tells me the object is invalid. What am I doing wrong?

PlattevilleWS_Intern
  • 1
  • you cannot multiply two different unit ... – Temani Afif Mar 09 '19 at 19:25
  • possible duplicate of https://stackoverflow.com/q/53713199/8620333 / https://stackoverflow.com/a/53364752/8620333 – Temani Afif Mar 09 '19 at 19:27
  • tenani ive aso tried using calc((100vw / 100) * (0.013641975308642 * 100vw)); with the same unit on each side, it does not work either – PlattevilleWS_Intern Mar 09 '19 at 19:49
  • Media queries are often much easier to understand than a bunch of `calc` rules. Why do you want to avoid media queries? – Sean Mar 09 '19 at 19:53
  • you cannot mutliple two units (same or different), it's invalid ... what does `vw*vw` mean? nothing. Check the links I shared to see the rules – Temani Afif Mar 09 '19 at 19:59
  • because with media queries you can only set css values based on if the viewport is a certain size i want to set the css values entirely dynamically so it changes for every pixel on the screen, making it very dynamic – PlattevilleWS_Intern Mar 10 '19 at 02:06

0 Answers0