CODEWITHSUNDEEP
css
user3568783
user3568783

Reputation:

How can I make it so the width of a DIV changes when my browser width changes?

I have this CSS:

#rootView, #topView {
    width: 100rem;
}

How can I make it so the width is 100rem if the browser width is greater than 1000px and 80rem if the browser width is between 800px and 1000px?

Upvotes: 1

Views: 181

Answers (3)

alessandrio
alessandrio

Reputation: 4370

@media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it.

body{
    background:pink;
}
@media screen and (min-width: 800px) {
  body{
      background:red;
  }
  #rootView, #topView {
    width: 80rem;
  }
}
@media screen and (min-width: 1000px) {
  body{
      background:green;
  }
  #rootView, #topView {
    width: 100rem;
  }
}

Upvotes: 1

emmanuel
emmanuel

Reputation: 9615

You have to set up a media query.

@media (min-size: 800px) and (max-size: 1000px) {
   #rootView, #topView {
     width: 80rem;
   }
}
@media (min-size: 1001px) {
   #rootView, #topView {
     width: 100rem;
   }
}

Reference: MDN

Upvotes: 2

Katy Pillman
Katy Pillman

Reputation: 11

You can solve this with javascript.

function boo() {
            var width = document.getElementById("body").style.width;
            if (width == "800px")
                document.getElementById("topView").style.width="80rem";
            else
                document.getElementById("topView").style.width="100rem";
}

Or something very similar to that. You can get width length, and if larger than whatever. But the other answers may be better.

Upvotes: 0

Related Questions