CODEWITHSUNDEEP
javascripthtmlcssresize
Sherri
Sherri

Reputation: 317

How do I keep my content moving when the user resizes their window?

Here is the code pen: http://codepen.io/mlynn/pen/myaeea

I want everything to stay in the same place at all times, and to just have a bunch of white space at the sides when fullscreened, and to perhaps have that white space go away when the window is resized small enough (much like stackoverflow does it).

How can this be achieved? I tried changing widths that were set as percentages to pixels instead, and I also tried out min-width and max-width, but either I was doing it wrong or that's not the correct path to take.

In other words, I'd find every instance of:

width:50%

and chnaged it to

min-width:500px;
max-width:500px;

I also tried wrapping the entire body in a div and setting width/height properties for it, but yeah, that didn't work either.

I also tried setting positions to "fixed" and "absolute" but I didn't find success with that either.

Upvotes: 0

Views: 40

Answers (1)

Anson Aştepta
Anson Aştepta

Reputation: 1145

change your css body 

body {
  /*background:url('');*/
    background-color:#1E1F21;                       /*Back Colors*/
    position:fixed;
    width:1400px;
    height:1440px;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 16px;

}

You does figure out to use position:fixed but inserted it in wrong place,this will fix your items in the same place. You can change the width and height value to fulfill advance requirment.

check : http://codepen.io/anon/pen/YPdyGJ

Upvotes: 1

Related Questions