CODEWITHSUNDEEP
css
Mark
Mark

Reputation: 3849

CSS: Is it possible to make a div become wider as the screen width becomes smaller?

I want to try to size a div width as an inverse of the screen size, until it hits a maximum of 100%, using only CSS (no JS please).

To be clear, here is an example:

I don't want to use media queries because its just too much micromanaging, im hoping for some kind of proportional calc() way of doing this

So far I've been proportionally sizing div widths using 'vw' dimensions which works just fine, but in this case I want to try to do the inverse.

I'm hoping someone has come up with a piece of magic methodology to do this?

Upvotes: 4

Views: 1429

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

You can use calc(Xpx - Yvw). The Yvw will grow when the screen is big making the div smaller and the opposite.

Here is a basic example:

.box {
  width:calc(750px - 50vw);
  min-width:50px; /* let's have a minimum boundary */
  max-width:100%; /* and a maximum boundary */
  margin:auto;
  height:50px;
  background:red;
}
<div class="box"></div>

But as I commented, having a div with a fixed size will also do the job visually

.box {
  width:500px;
  max-width:100%;
  margin:auto;
  height:50px;
  background:red;
}
<div class="box"></div>

Upvotes: 2

Related Questions