css Question posted in
Some basic documentation can be found here.

Invalid Property Value CSS

I’m trying to add a dynamic linearly decreasing width to a side nav with css below a certain breakpoint until it hits a minimum value. Currently it’s just stepping between two values for some reason and saying the following is an invalid property value. I think it’s due to the px and vw units being different but I don’t know how else to add it

width: calc(160px - 65px * ( ( 1345px - 100vw ) / 65 ) );

Operator spacing looks fine to me and if I remove the difference it has no issue so this is what makes me think it’s a unit difference. I tried wrapping the difference with another calc or placing it under root but this didn’t work.
Here’s the relevant css:

@media (min-width: 1345px) {
    .sidenav {
        width: 160px;
    }
}

@media (min-width: 768px) {
    .homeblock {
        width: 160px;
        height: 50px;
    }
    .sidenav {
        width: calc(160px - 65px * ( ( 1345px - 100vw ) / 65 ) );
        height: calc(100% - 50px);
    }
}

Tried varying units, changing the expression, wrapping it and more. Also tried looking to get the window width in pixels through another method but see no other examples.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got the following to work which is what I was hoping for along with adding a min as per @Felpower 's answer

    width: calc(min(160px, 160px - 10 * ( calc( 1345px - 100vw ) / 65 ) ));

    It might not be precise as I don't understand the conversions here on the 10 scale factor but it's a simple adjustment.


  2. 0

    Try this, this should be easier and work faster

    @media (min-width: 768px) {
    .homeblock {
        width: 160px;
        height: 50px;
    }
    .sidenav {
        width: calc( min(160px, 95px + (65px * (1345px - 100vw) / 65px) ));
        height: calc(100% - 50px);
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search