if I am zoom out/in my website in google chrome (ctrl -/+) then i could notice that my website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
<section class="container-fluid">
<div class="row">
<div class="col-sm-6 padding-0">
<img src="/images/main.jpg" alt="img" class="img-responsive">
</div>
<div class=" col-sm-6 padding-0">
<!--<div class="row">-->
<!--<div class="col-md-12">-->
<div class="middle1">
<div class="middle2">
<h2>Casa uPVC Doors and Windows</h2>
<p style="display: inline-block">
Casa windows is a specialized product from Lancet Glass-LG TUFF family.Casa windows are
fabricated from <span class="blue">Indo-German uPVC profiles technology</span>.The top Quality breakthrough product
would be tailor made and is designed to exceed customer expectations.Top end manufacturing
standards through rigid quality control processes sets us apart, and gives Casa windows the
competitive edge.Casa windows will always strive to be customer centric and customer focused,
and believes in quality as its culture.
</p>
</div>
<div>
<h5 class="middle3">"Customer Satisfaction is Where We Begin"</h5>
<br/>
</div>
</div>
<!--<div class="row">-->
<div class="mid3">
<div class="mid1 ">
<h4>Request a Call Back</h4>
</div>
<div class="marge">
<form class="form-inline">
<div class="form-inline">
<input type="text" class="form-control" id="email" placeholder="name">
<input type="email" class="form-control" id="pwd" placeholder="email">
</div>
<div class="form-inline" style="margin-top:8px">
<input type="number" class="form-control" id="email" placeholder="phone number">
<input type="text" class="form-control" id="email" placeholder="Location">
</div>
<button type="submit" class="stop" style="margin-top:8px">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
styles:
body{
font-family: 'Times New Roman', Times, serif;
}
.lastt{
font-family: 'Times New Roman', Times, serif;
}
.blue{
text-decoration: underline;
text-decoration-color:#0890c9;
font-weight: 700;
}
.title{
padding-top:20px;
font-weight:700;
font: 13px;
}
.h44,.h55,.h66{
display: inline-block;
}
.h5{
padding-top: 18px;
}
.main{
height:80px;
}
.middle1{
background-color: #034ea2;
}
.form-inline > * {
margin:8px 5px !important;
}
.middle2{
color: #ffffff;
padding-left: 15px;
padding-right: 10px;
padding-top: 15px;
text-align: justify;
text-justify: inter-word;
font-family: 'Times New Roman', Times, serif;
}
.para{
text-align: justify;
text-justify: inter-word;
font-family: 'Times New Roman', Times, serif;
font-weight: 500;
}
.marge{
margin-top: 10px;
}
.head1{
font-family: 'Times New Roman', Times, serif;
font-weight: 500;
}
.middle3{
text-align: center;
color: #ffffff;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
}
.mid2{
display: inline-block;
}
.mid3{
background-color:#0890c9;
padding-left: 15px;
padding-right: 10px;
padding-top: 5px;
color: #ffffff;
}
.mid1{
font-family: 'Times New Roman', Times, serif !important;
}
.input{
margin-top: 15px;
}
.stop
{
border-radius: 5px;
background-color:#034ea2;
color: #ffffff;
font-weight: 600;
border-color: red;
height:32px;
border-width: 1px;
}
.blo{
height:"30px";
background-color: #034ea2;
padding-top: 10px;
padding-bottom: 10px;
}
.border{
border-right: 1px solid #0890c9;
}
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
.set{
border-right: 1px;
}
.padding-0{
padding: 0 !important;
margin: 0 !important;
}
