3

I want to make a div that is
80vw if 80vw > 1000px
1000px if 80vw <= 1000px and if 1000px <= 100vw
100vw if 1000px > 100vw

I tried the following:

div {
    width: 80vw;
    min-width: 1000px;
    max-width: 100vw;
}

This would work if max-width overrides min-width, but it does not: Why doesn't max-width override min-width?
I know there is a simple solution using @media, but I want to know if this is possible with just width, min-width, and max-width.

Jaden Chaca
  • 77
  • 7
  • 3
    Use media queries instead – j08691 Aug 23 '19 at 17:12
  • I know there is a simple solution using @media, but I want to know if this is possible with just width, min-width, and max-width. – Jaden Chaca Aug 23 '19 at 17:15
  • is not ` width: 1000px; min-width: 80vw; max-width: 100vw;`fitting your needs ? – G-Cyrillus Aug 23 '19 at 18:48
  • get ride of width. Use min-width as your smallest setting and then max-width as your largest, Such as min-width: 80vw; max-width: 100vw; – Adrianopolis Aug 23 '19 at 22:10
  • No, `max-width` won't override `min-width`, as that is how it works. In your case though, there's a workaround, besides `@media` query's, where one swap the value's between `width` and `min-width`, e.g. https://jsfiddle.net/cpje297g/ – Asons Aug 25 '19 at 12:40

0 Answers0