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>
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.