3

When I try to zoom in to my HTML page, the elements such as Divs get misplaced as if it is 'trying to be responsive' instead of being fixed to their original positions.

To further demonstrate the problem, here's a Codepen of my layout. Try to zoom in and zoom out on the page. Notice how the positions of the Columns change.

HTML:

<main class="wrapper">  <!--Main Content Starts here-->

<div class="column-one">
    <div class="fixed-container-inside-column">
    </div>
  </div>

  <div class="column-two">
  </div>

  <div class="column-three">
    <div class="fixed-container-inside-column">
    </div>
  </div>

  <div class="column-four">
    <div class="fixed-container-inside-column">
    </div>
  </div>

</main> <!--Main Content Ends here-->

CSS:

.wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    display: block;
    max-width: 1349px;
    padding-top: 60px;
    padding-bottom: 40px;

    -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;

    -webkit-transition-duration: all 0.4s ease-in-out;
    -moz-transition-duration: all 0.4s ease-in-out;
    -o-transition-duration: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .column-one{
    position: relative;
    display: block;
    float: left;
    width: 230px;
    height: 500px;
    margin-left: 20px;
    background-color: red;
  }

  .column-two{
    position: relative;
    float: left;
    width: 500px;
    height: 100%;
    min-height: 2500px;
    margin-left: 35px;
    background-color: blue ;
  }

  .column-three{
    position: relative;
    float: right;
    width: 240px;
    height: 100%;
    min-height: 500px;
    margin-right: 20px;
    background-color: red;
  }

  .column-four{
    position: relative;
    float: right;
    width: 250px;
    height: 100%;
    min-height: 500px;
    margin-right: 20px;
    background-color: blue ;
  }

  .fixed-container-inside-column{
    position: fixed;
    display: block;
    width: 200px;
    height: 400px;
    margin: 15px;
    background-color: green;
  }

I want to fix all the Div columns to their exact positions to make sure that it stays intact when a user zooms in (Perfect examples: Facebook, Stackoverflow doesn't get affected when zoomed in)

Can you guys checkout my Codepen and suggest me a solution?

Jay
  • 4,873
  • 7
  • 72
  • 137

4 Answers4

0

As your columns' width is set by using px as units, the wrapper's width should be set that way as well. Try changing the max-width of the wrapper to min-width like this:

min-width: 1349px;

Also, the green boxes' position should not be set to fixed. Remove the fixed attribute in .fixed-container-inside-column .

Finally, if you do not want the last two columns to adapt to the window size, you should set their float to left as well:

 .column-three{
  position: relative;
  float: left;
  width: 240px;
  height: 100%;
  min-height: 500px;
  margin-left: 20px;
  background-color: red;
}

.column-four{
  position: relative;
  float: left;
  width: 250px;
  height: 100%;
  min-height: 500px;
  margin-left: 20px;
  background-color: blue ;
}

By doing so, your sketch behaved as expected when zooming in and changing browser window size.

unx
  • 74
  • 5
0

You have the following in the css

position: relative;
float: left;

So when we zoom in, the browser tries its level best to fit the boxes on the screen. If they do not fit, those that do not fit get moved to the lower level.

You can try giving wrapper a fixed width in terms of px. Instead of having max-width, you can set the width in terms of px

width: 100% means occupy all the space of the parent container, which in this case would mean occupy all the width of the browser area. The width in terms of "px" gets affected by the zoom operation as each pixel is now represented by a larger screen area. What we want is that the boxes always have enough space so that they do not float to the lower level.

S V
  • 570
  • 8
  • 21
0

If zoom is not necessary you can disable zoom for the mobile user using the

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Link for your help is how-can-i-disable-zoom-on-a-mobile-web-page

Community
  • 1
  • 1
Haseeb Anser
  • 494
  • 1
  • 5
  • 19
-1

change :

.wrapper {
//width: 100%; to
width: 1349px;
}

or

      .wrapper{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    display: block;
    max-width: 1349px;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 40px;

    -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;

    -webkit-transition-duration: all 0.4s ease-in-out;
    -moz-transition-duration: all 0.4s ease-in-out;
    -o-transition-duration: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .column-one{
    position: relative;
    display: block;
    float: left;
    width: 18%;
    height: 500px;
    margin-left: 2%;
    background-color: red;
  }

  .column-two{
    position: relative;
    float: left;
    width: 38%;
    height: 100%;
    min-height: 2500px;
    margin-left: 2%;
    background-color: blue ;
  }

  .column-three{
    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    min-height: 500px;
    margin-left: 2%;
    background-color: red;
  }

  .column-four{
    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    min-height: 500px;
    margin-left: 2%;
    background-color: blue ;
  }

  .fixed-container-inside-column{
    position: fixed;
    display: block;
    width: 14%;
    height: 400px;
    margin:2%;
    background-color: green;
  }

http://codepen.io/anon/pen/WQLQpm?editors=010

madalinivascu
  • 32,064
  • 4
  • 39
  • 55