Question posted in 
im getting an problem with resize the page im trying to resize the connecter but i can’t, i tryed on my phone and this page the things its all over one of witch others, i dont know what to do now, can you help me ?
HTML CODE
Madeira Criativa
<style>
body{
width:100%;
background-color: rgba(20, 152, 152, 0.5);
}
div.containere
{
position:relative;
top: 10%;
left: 26%;
width:43%;
background-color: rgba(243, 243, 242, 0.9);
}
div.containera
{
height:0px;
width:0px;
padding:0;
margin:0;
position:relative;
top: -900px;
left: 76%;
}
</style>
</head>
<body style="width:100%;">
<div class="navbar navbar-inverse navbar-fixed-top " >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="assets/img/LOGO.png" alt="" />
</div>
<div class="navbar-collapse collapse move-me">
<ul class="nav navbar-nav navbar-right set-links">
<li><a href="index.html" >HOME</a></li>
<li><a href="about.html">QUEM SOMOS</a></li>
<li><a href="galery.php">PROJECTOS</a></li>
<li><a href="services.html">SERVIÇOS</a></li>
<li><a href="budget.html" class="active-menu-item">ORÇAMENTOS</a></li>
<li><a href="contact.html">CONTACTO</a></li>
</ul>
</div>
</div>
</div>
<!--MENU SECTION END-->
<section class="headline-sec">
<div class="overlay ">
<h3>ORÇAMENTOS </h3>
</div>
</section>
<!!!!!!!!!!!!!!!!!!!!!!!!!!---->
<section>
<img src="assets/img/check.png" alt="" width="15%" height="25%" style="position: absolute; top: 300px; left: 5%;" />
<img src="assets/img/call.png" alt="" width="15%" height="25%" style="position: absolute; top: 600px; left: 5%;" />
<img src="assets/img/euro.png" alt="" width="15%" height="25%" style="position: absolute; top: 900px; left: 5%;" />
<div class="containere">
<form action="MAILTO:[email protected]" enctype="multipart/form-data" method="post" name="post-job">
<table >
<tbody>
<tr>
<td style= width:"43%">
<h4> DIGA-NOS O QUE PRECISA</h4>
Comece por dar um título ao seu pedido<span class="redfont">*</span>:
<p> <input id="titulo_projeto" style="width: 80%;" maxlength="150" name="titulo_projeto" required="required" type="text" placeholder="Exemplo: Remodelação de Apartamento" /></p>
Agora faça uma descrição detalhada do seu pedido <span class="redfont">*</span>: <br />
<textarea id="project-description" style="width: 90%; height: 10%" name="descricao" required="required" rows="3" placeholder="Exemplo: Preciso de orçamentos para remodelar a minha casa, pintar 3 divisões com 22 m2 cada, é necessário também colocar pavimento na sala com 30 m2 e remodelar cozinha e wc ..."></textarea><br /><br />
<div id="project-fileupload-container" class="fileupload-container">
<div id="fileupload-container" class="file-uploader-area"><span class="btn btn-file-uploader"> Adicionar ficheiro...</span></div>
<div id="fileupload-container" class="file-uploader-area"><span class="btn btn-file-uploader"> <input id="docfiles" class="fileupload-input" multiple="multiple" name="uploadFile" type="file" /> <input name="uploadLimit" type="hidden" value="10" /> </span></div>
</div>
<p> </p>
<p><strong> QUE SERVIÇOS IRÃO SER NECESSÁRIOS?</strong></p>
<div class="form-step primary-category">
Qual a categoria que melhor define o seu pedido<span class="redfont">*</span>:<br />
<select id="categoria" class="required" name="categoria" required="required">
<option value="">Escolha...</option>
<option value="1">Construção, Remodelação e Serviços para Casa</option>
<option value="33">Manutenção e Reparação</option>
<option value="41">Transportes e Mudanças</option>
<option value="99">Limpezas</option>
</select></div>
<p> </p>
<p><strong> CONTATOS PARA RECEBER ORÇAMENTOS</strong></p>
<div class=""><label> Nome <span class="redfont">*</span>: </label> <input id="new-name" class="login-input" name="name" required="required" type="text" value="" /></div>
<p> </p>
<div class="form-step user-login-input new-mobile"><label class="control-label" for="mobile"> Telefone<span class="redfont"> *</span>: </label> <input id="mobile" class="login-input" name="mobile" type="text" value="" /></div>
<p> </p>
<div class="form-step user-login-input new-email"> <label> Email <span class="redfont">*</span>: </label> <input id="new-email" name="email" required="required" type="email" value="" /></div>
<div> </div>
<div style="padding-left: 30px;"><input id="post-project-submit" class="btn btn-info" name="submit" type="submit" value="ENVIAR PEDIDO DE ORÇAMENTO" /></div>
<p> </p>
</form></td>
</tr>
</tbody>
</table>
</div>
<div class="containera">
<div class="post-project-side-column">
<div class="post-project-upsell-ribbon upsell-ribbon">
<table style="height: 501px;" width="280">
<tbody>
<tr>
<td style="background-color:rgba(255, 129, 72, 1);">
<h4 class="post-project-upsell-ribbon upsell-ribbon" style="text-align: center;"><span style="color: #ffffff;">Pedir Orçamentos <strong>Grátis</strong></span></h4>
</td>
</tr>
<tr>
<td style="background-color:rgba(243, 243, 242, 0.9)">
<div class="post-project-side-column">
<div class="post-project-form-info">
<h4 class="post-project-info-title" style="text-align: center;">Vantagens</h4>
<p> </p>
<ul class="post-project-info-list">
<li class="post-project-info-item">
<p>Em poucas horas será contatado(a) por profissionais interessados em lhe apresentar a sua melhor proposta.</p>
</li>
<li class="post-project-info-item">
<p>Em média só precisa de 2 minutos para fazer o seu Pedido de Orçamentos.</p>
</li>
<li class="post-project-info-item">
<p>As propostas são enviadas diretamente para si, sem intermediários e sem comissões.</p>
</li>
<li class="post-project-info-item">
<p>Os pedidos de orçamentos são totalmente grátis e sem qualquer compromisso!</p>
</li>
<li class="post-project-info-item">
<p>Os pedidos de orçamentos com contato telefónico recebem em média + 250% propostas que os outros.</p>
</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</div>
</div>
<section id="footer-sec" class="footer" >
<div class="container">
<div class="row">
<div class="col-md-4">
<h4>ACERCA DA COMPANHIA</h4>
<p style="padding-right:50px;">
Apresentamos um serviço de excelência e de alta
qualidade mas sempre com os melhores preços.
Acreditamos ter resposta para qualquer projecto
dentro do mercado de restauro, remodelaçao e
reparação <a href="about.html">mais..</a>
</p>
</div>
<div class="col-md-4">
<h4>Localização</h4>
<h5>Parque empresarial</h5>
<h5>da Ribeira Brava Pav.15</h5>
<h5>Madeira - Portugal</h5>
<br />
<h5><strong>Email:</strong> [email protected]</h5>
<h5><strong>Telef:</strong> +351 291626612</h5>
<h5><strong>TeleM:</strong> +351 914634018</h5>
</div>
<div class="col-md-4">
<h4>REDES SOCIAIS</h4>
<div class="social-links">
<a href="https://www.facebook.com/madeiracriativa/?fref=ts" > <i class="fa fa-facebook fa-2x" ></i></a>
<a href="#" > <i class="fa fa-twitter fa-2x" ></i></a>
<a href="#" > <i class="fa fa-linkedin fa-2x" ></i></a>
<a href="#" > <i class="fa fa-google-plus fa-2x" ></i></a>
<a href="#" > <i class="fa fa-github fa-2x" ></i></a>
<a href="#" > <i class="fa fa-digg fa-2x" ></i></a>
<a href="#" > <i class="fa fa-dropbox fa-2x" ></i></a>
</div>
</div>
</div>
</div>
</section>
<!--FOOTER SECTION END-->
<div class="copy-txt">
<div class="container">
<div class="row">
<div class="col-md-12 set-foot" >
© 2016 MadeiraCriativa | Todos os direitos reservados | Design by :Chico
</div>
</div>
</div>
</div>
<!-- COPY TEXT SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</body>
</html>
CSS CODE
/* =============================================================
GENERAL STYLES
============================================================ */
body {
font-family: 'Open Sans', sans-serif;
line-height:30px;
font-size:16px;
margin:auto;
}
section {
padding-bottom:80px;
padding-top:75px;
}
.hr-set {
border-top:2px solid #000;
max-width:250px;
}
h3 {
padding:15px 5px;
font-weight:900;
text-transform:uppercase;
}
h4 {
padding:15px 5px;
font-weight:900;
text-transform:uppercase;
}
.icon-custom-1 {
background-color: #fff;
padding: 25px;
border-radius: 10px;
cursor:pointer;
}
.icon-custom-2 {
background-color: #49CD7D;
padding: 25px;
border-radius:50%;
width:100px;
height:100px;
cursor:pointer;
}
.icon-custom-1:hover {
background-color: #000;
}
.icon-custom-2:hover {
background-color: #000;
}
.color-1 {
color: #49CD7D;
}
.color-2 {
color: #fff;
}
.p-top-row {
padding-top:40px;
}
/* =============================================================
MESU STYLES
============================================================ */
.navbar-inverse .navbar-brand,.navbar-inverse .navbar-brand:hover {
color: #FFF;
font-size: 35px;
letter-spacing: 5px;
font-weight: 900;
background-color:rgba(20, 152, 152, 1);
padding-bottom: 60px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: rgba(16, 16, 16, 0);
}
.navbar-inverse {
border-color: rgba(16, 16, 16, 0);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 0px;
}
.set-links {
padding: 15px 20px 10px 20px;
}
.navbar-inverse .navbar-nav > li > a {
color:#fff;
font-weight:900;
}
.navbar-inverse .navbar-nav > li > a:hover {
color:rgba(20, 152, 152, 1);
}
.active-menu-item {
color:rgba(20, 152, 152, 1)!important;
}
.navbar-brand small {
font-size:12px;
font-weight:normal;
letter-spacing:1px;
}
/* =============================================================
HOME SECTION STYLES -IN HOME / INDEX.HTML
============================================================ */
#home-sec {
background: url(../img/header.jpg) no-repeat center center;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size:cover;
color:#fff;
}
#home-sec .overlay {
background-color:rgba(20, 152, 152, 0.9);
min-height:350px;
}
#home-sec h1 {
padding-top:150px;
font-weight:900;
}
#home-sec p {
padding:10px;
}
/* =============================================================
SEARCH DOMAIN SECTION STYLES -IN HOME / INDEX.HTML
============================================================ */
#search-domain {
padding-bottom:50px;
padding-top:50px;
}
.input-cls {
height: 70px;
border: 3px solid #2EB1D0;
font-size:30px;
color:#2EB1D0;
padding-left:40px;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
}
.btn-set {
font-size:30px;
border: 5px double #fff;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
}
/* =============================================================
SERVICES SECTION STYLES -IN HOME / INDEX.HTML
============================================================ */
#services-sec {
background-color:#202020;
color:#fff;
}
/* =============================================================
CLIENT TESTIMONIAL SECTION STYLES -IN HOME / INDEX.HTML
============================================================ */
#testimonial-sec {
background-color: rgba(20, 152, 152, 0.9);
}
.carousel-indicators .active {
width: 25px;
height: 25px;
background-color: #fff;
}
.carousel-indicators li {
width: 25px;
height: 25px;
border: 1px solid #fff;
}
#carousel-example .slide-custom {
min-height:300px;
padding:20px;
line-height:30px;
}
#carousel-example h1, h2 {
color:#000;
}
#carousel-example h4 {
line-height:30px;
font-size:14px;
color: #fff;
}
#carousel-example h4 i{
padding:5px;
}
#carousel-example .pad-top {
padding-top:80px;
}
#carousel-example {
margin-top:50px;
}
#carousel-example .user-img {
border: 5px solid #49CD7D;
overflow: hidden;
border-radius: 50%;
display: inline-block;
margin-left:20px;
}
#carousel-example .img-u {
max-height: 90px;
max-width: 90px;
}
#carousel-example .c-black {
color:#49CD7D;
font-style: italic;
font-size: 20px;
padding: 5px;
}
/* =============================================================
FEATURES SECTION STYLES -IN HOME / INDEX.HTML
============================================================ */
#features-sec {
background-color:#EFEFEF;
}
/* =============================================================
FOOTER SECTION STYLES
============================================================ */
#footer-sec {
background-color:#121212;
padding-bottom:30px;
padding-top:30px;
color: #DFD1D1;
}
.social-links a,.social-links a:hover{
color:#fff;
text-decoration:none;
}
.social-links a i {
background-color:#000;
padding:15px 20px;
margin:5px;
}
.copy-txt {
background-color:#202020;
padding:15px;
color:#7C7C7C;
}
.set-foot {
text-align:right;
padding-right:50px;
}
/* =============================================================
PAGE HEADLINE STYLES
============================================================ */
.headline-sec {
background: url(../img/header.jpg) no-repeat center center;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size:cover;
color:#fff;
}
.headline-sec .overlay {
background-color:rgba(20, 152, 152, 0.9);
min-height:170px;
}
.headline-sec h3 {
padding-top:100px;
font-weight:900;
padding-left:100px;
}
/* =============================================================
PRICING STYLES --pricing.html page
============================================================ */
#pricing-sec h3 {
color:#2784DF;
}
.pricing-div ul{
padding-top:30px;
list-style:none;
}
.pricing-div ul li {
padding-left:0px;
padding-bottom:20px;
}
.pricing-div ul li i {
padding-right:10px;
}
.pricing-div .price {
font-size:30px;
font-weight:800;
display:block;
}
.set-wth {
max-width:400px;
}
2
Answers
Use media query to make fluid layout also include this meta tag
You should include the following
<meta>viewport element in all your web pages: