How can I get my content to automatically resize when a visitor zooms in or out?

Question

How can I get my content to automatically resize with the page when a visitor zooms in or out?

This is pure html, css, & js code only.

I tried using the "viewport" tag but I still can not get it right?

Any help is greatly appreciated.

     <!doctype html>
            <html>
                <head>


                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

                    <title>Search box with icon</title>

                </head>

                <style>


                    #dropdown{
                        border-top:thin solid  #e5e5e5;
                        border-right:thin solid #e5e5e5;
                        border-bottom:0;
                        border-left:thin solid  #e5e5e5;
                        box-shadow:0px 1px 1px 1px #e5e5e5;
                        float:left;
                        height:17px;
                        margin:.8em 0 0 5em; 
                        outline:0;
                        padding:.4em 0 .4em .6em; 
                        width:400px; 
                    }

                    #dropdown-holder{
                        background-color:#f1f1f1;
                        border-top:thin solid #e5e5e5;
                        box-shadow:1px 1px 1px 1px #e5e5e5;
                        cursor:pointer;
                        float:left;
                        height:27px;
                        margin:11px 0 0 0;
                        text-align:center;
                        width:50px;
                    }

                    #dropdown-holder img{
                        margin:4px;
                        width:20px; 
                    }

                    #search-text-input{
                        border-top:thin solid  #e5e5e5;
                        border-right:thin solid #e5e5e5;
                        border-bottom:0;
                        border-left:thin solid  #e5e5e5;
                        box-shadow:0px 1px 1px 1px #e5e5e5;
                        float:left;
                        height:17px;
                        margin:.8em 0 0 13em; 
                        outline:0;
                        padding:.4em 0 .4em .6em; 
                        width:400px; 
                    }

                    #button-holder{
                        background-color:#f1f1f1;
                        border-top:thin solid #e5e5e5;
                        box-shadow:1px 1px 1px 1px #e5e5e5;
                        cursor:pointer;
                        float:left;
                        height:27px;
                        margin:11px 0 0 0;
                        text-align:center;
                        width:50px;
                    }

                    #button-holder img{
                        margin:4px;
                        width:20px; 
                    }

                    #nav-body{
                      background-color: black;
                      height: 55px;
                      margin-top: -8px;
                      margin-left: -8px;
                      margin-right: -8px;

            }

            .product-box1{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 50px;
            }

            .product-box2{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 50px;
            }

            .product-box3{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: -650px;
              margin-left: 480px;
            }

            .product-box4{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 480px;
            }

            .product-box5{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: -650px;
              margin-left: 900px;
            }

            .product-box6{
              background-color: red;
              height: 300px;
              width: 300px;
              margin-top: 50px;
              margin-left: 900px;
            }

            body{width:100%;}

            </style>

            <body>

            <input type='text' placeholder='Search...' id='search-text-input' />
            <div id='button-holder'>
                <img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
            </div>

            <input type='text' placeholder='Dropdown...' id='dropdown' />
            <div id='dropdown-holder'>
                <img src='https://www.codeofaninja.com/demos/css-examples/textbox-with-search-icon-in-html-css/magnifying_glass.png' />
            </div>

            <div id="nav-body">
            </div>

              <div class="product-box1">
                </div>

              <div class="product-box2">
                </div>

              <div class="product-box3">
                </div>

              <div class="product-box4">
                </div>

              <div class="product-box5">
                </div>

              <div class="product-box6">
                </div>

            </body>
            </html>

https://jsfiddle.net/Kitana16/5hz7u5up/3/

If by "zoom" you mean the user using `Ctrl-+` etc. to increase/decrease the zooming factor, you should not try to re-size or re-layout. The user, who may be someone with poor eyesight, for example, expects the page to remain as is, but zoomed in or zoomed out. — , May 15 '17 at 01:34

score 0 · Answer 1 · answered May 13 '17 at 04:02

When you wan to resize automatically based on viewport or window resize make your css in the following

in evry CSS class u have to use max-widht: your width + everytime width:100% this will enable responsive use, so will work for zoom, resize etc

#dropdown{
                    border-top:thin solid  #e5e5e5;
                    border-right:thin solid #e5e5e5;
                    border-bottom:0;
                    border-left:thin solid  #e5e5e5;
                    box-shadow:0px 1px 1px 1px #e5e5e5;
                    float:left;
                    height:17px;
                    margin:.8em 0 0 5em; 
                    outline:0;
                    padding:.4em 0 .4em .6em; 
                    max-width:400px; // max-width
                    width: 100%; // width 100%
                }

                #dropdown-holder{
                    background-color:#f1f1f1;
                    border-top:thin solid #e5e5e5;
                    box-shadow:1px 1px 1px 1px #e5e5e5;
                    cursor:pointer;
                    float:left;
                    height:27px;
                    margin:11px 0 0 0;
                    text-align:center;
                    max-width:50px; // max-width
                    width: 100%; // width 100%
                }

                #dropdown-holder img{
                    margin:4px;
                    max-width:20px; // max-width
                    width: 100%; // width 100%
                }

                #search-text-input{
                    border-top:thin solid  #e5e5e5;
                    border-right:thin solid #e5e5e5;
                    border-bottom:0;
                    border-left:thin solid  #e5e5e5;
                    box-shadow:0px 1px 1px 1px #e5e5e5;
                    float:left;
                    height:17px;
                    margin:.8em 0 0 13em; 
                    outline:0;
                    padding:.4em 0 .4em .6em; 
                    max-width:400px; // max-width
                    width: 100%; // width 100%
                }

                #button-holder{
                    background-color:#f1f1f1;
                    border-top:thin solid #e5e5e5;
                    box-shadow:1px 1px 1px 1px #e5e5e5;
                    cursor:pointer;
                    float:left;
                    height:27px;
                    margin:11px 0 0 0;
                    text-align:center;
                    max-width:50px; // max-width
                    width: 100%; // width 100%
                }

                #button-holder img{
                    margin:4px;
                    max-width:20px; // max-width
                    width: 100%; // width 100% 
                }

                #nav-body{
                  background-color: black;
                  height: 55px;
                  margin-top: -8px;
                  margin-left: -8px;
                  margin-right: -8px;

        }

        .product-box1{
          background-color: red;
          height: 300px;
          max-width:300px; // max-width
          width: 100%; // width 100%
          margin-top: 50px;
          margin-left: 50px;
        }

        .product-box2{
          background-color: red;
          height: 300px;
          max-width:300px; // max-width
          width: 100%; // width 100%
          margin-top: 50px;
          margin-left: 50px;
        }

        .product-box3{
          background-color: red;
          height: 300px;
          max-width:300px; // max-width
          width: 100%; // width 100%
          margin-top: -650px;
          margin-left: 480px;
        }

        .product-box4{
          background-color: red;
          height: 300px;
          max-width:300px; // max-width
          width: 100%; // width 100%
          margin-top: 50px;
          margin-left: 480px;
        }

        .product-box5{
          background-color: red;
          height: 300px;
          max-width:300px; // max-width
          width: 100%; // width 100%
          margin-top: -650px;
          margin-left: 900px;
        }

        .product-box6{
          background-color: red;
          height: 300px;
          max-width:300px; // max-width
          width: 100%; // width 100%
          margin-top: 50px;
          margin-left: 900px;
        }

remove the comment from css this // max-width and this // width 100% — aaa, May 13 '17 at 04:08
page isnt screwed up anymore but it is still not resizing correctly. — JazzedUp, May 13 '17 at 04:11
the class for each product-box is making the problem this property margin-left -> it have to be dinamically as well on window resize or change :) the layout by addind max-width will enable responsive use, u have to correct amrgin-left to be as well dinamic based on vieport — aaa, May 13 '17 at 04:15

score 0 · Accepted Answer · answered May 13 '17 at 04:59

Assuming that what you mean by "when a visitor zooms in or out" is "to fit within the width of the window," i.e. for your page to be responsive, then the easiest way is to use percentages rather than pixels to describe widths and heights. Please understand that percentages refer to the enclosing block. For width, that is typically the width of the , but not for height. You can also use vw, or the viewport width, to have a unit that can be used for both width and height and be consistent.

In your example, you are using large negative margins to position your boxes. This is not a helpful way to lay out a group of boxes. If you want them laid out as you have them, that is, in pairs one above a second, with three pairs across, there are many ways of accomplishing that, but a simple one would be to lay out three containers horizontally, and have each container hold two boxes, one above the next.

I have a pen that shows what I am saying. The boxes stay square as the window is resized. Here is the code:

HTML

<h1>Three stacked pairs of boxes</h1>
<h3>Displayed responsively</h3>
<div class="holder">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>
<div class="holder">
    <div class="box box3"></div>
    <div class="box box4"></div>
</div>
<div class="holder">
    <div class="box box5"></div>
    <div class="box box6"></div>
</div>

CSS:

.holder {
    display: inline-block;
}
.box {
    width: 26vw;
    height: 26vw;
    border: 1px solid black;
    margin-left: 5vw;
    margin-bottom: 5vw;
}
.box1 { background-color: red;}
.box2 { background-color: orange;}
.box3 { background-color: yellow;}
.box4 { background-color: green;}
.box5 { background-color: blue;}
.box6 { background-color: purple;}

And here is the pen: https://codepen.io/wahhabb/pen/MmGrvN

Hope that helps.

Thank You Sooo Much ! That is very helpful!!!! So this also applies to my search bars? This is what i am trying to accomplish - https://i.imgur.com/1NvwWvy.jpg — JazzedUp, May 14 '17 at 22:18

How can I get my content to automatically resize when a visitor zooms in or out?

2 Answers2