how to resize the web page when the browser window is re-sized?

Question

in my website this is working in background image slide show. but i need to get the same for body also. can any one help me?

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

I'm afraid to say I have no idea what you're looking for. Can you clarify what you need? — DACrosby, Mar 27 '13 at 06:40

score 0 · Answer 1 · answered Mar 27 '13 at 06:45

0

If you want to resize your page when the browser window changes size you can use media queries (only modern browsers support this) - or You can choose to use javascript (third option is both). However your question indicates you want to avoid javascript. I've made an example below with media queries. The css will be applied when your screen size is between 800px and 1000px. You can combine the statements, like just use min or max if you just want that.

@media all and (max-width: 1000px) and (min-width: 800px) {
  .cb-slideshow li span {
    /* css here*/
  }
}

You can change any element with media queries. It's commonly used to create responsive designs.

answered Mar 27 '13 at 06:45

Peter Rasmussen

16,474
7
46
63

Hi Xeano? i tried with it. but didn't work. i would like to know how can i write this in JavaScript? thanks – Anju Mar 27 '13 at 08:39
You should be able to use media queries. Which browser are you using? Here's a little guide if it doesn't work for you. It helped me the last time. http://stackoverflow.com/questions/7859336/css3-media-queries-not-working – Peter Rasmussen Mar 27 '13 at 08:49
Still not working.Am using Firefox. i dont want change the device width as the browser changes. when i minimize the webpage i need body also should minimize(all the contents in the body too) . i think i should use java script for it. do you have any idea about it. – Anju Mar 27 '13 at 10:55

score 0 · Answer 2 · answered Mar 27 '13 at 06:46

0

If you are looking for how to set your body window-wide even if it has not enough content, try

html, body{
    width: 100%;
    height: 100%
}

answered Mar 27 '13 at 06:46

Roman Bekkiev

3,010
1
24
31

score 0 · Answer 3 · answered Mar 27 '13 at 06:55

You can use something called Responsive Design. It uses Media Queries to adjust according to screen resolution. Just search for Responsive Design in any popular search engine and you'll get a lot to learn from the links.

For now you can add this style to your body

body {
  width:  100%;
  height: 100%;
}

This will make it the body responsive.

score 0 · Answer 4 · answered Mar 27 '13 at 06:59

0

Quick example, just add this to your page and when the page is below 960px the whole body should disappear

@media screen and(max-width:960px){
   body{
      display:none;
   }
}

now you can add as many changes needed to suit all sizes

answered Mar 27 '13 at 06:59

iConnor

19,997
14
62
97

how to resize the web page when the browser window is re-sized?

4 Answers4