Galera, boa noite. Estou desde cedo tentando configurar o meu site. Ele está funcionando perfeitamente na versão desktop e na versão celular ele cria uma parte em branco. Eu já tentei de TUDO para resolver e não consigo.
html, body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
padding: 0 auto;
}
#background {
background: url (img/main) no-repeat;
height:650px;
background: url(img/main.jpg) no-repeat;
background-color:#efc500;
background-position: center center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
}
#bar {
height:130px;
background-color:white;
opacity: 0.8;
filter: alpha(opacity=80%);
}
img.logotopo {float:left; margin-left:10px;}
#menu ul {
margin:0px auto;
margin-top:50px;
list-style:none;
float: right;
margin-right:10px;
}
#menu ul li { display: inline; }
#menu ul li a {
font-size:18px;
color:#efc500;
font-weight:bold;
margin-left: 30px;
text-decoration: none;
}
#menu ul li a:hover {border-bottom:6px solid #efc500;}
h1.textomain {
font-size: 5.0em;
color:#efc500;
margin-left:auto;
margin-right:auto;
text-align:center;
position:relative;
top:50px;
}
#botao {
margin-left:auto;
margin-right:auto;
text-align:center;
width:350px;
height:70px;
display:block;
position:relative;
top:50px;
text-align:center;
margin-bottom:30px;
background-color:#FFFFFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
opacity: 0.8;
filter: alpha(opacity=80%);
}
a.botao {
color:#efc500;
margin-left: auto;
margin-right: auto;
text-align:center;
position:relative;
top:18px;
font-size:1.3em;
text-decoration:none;
}
#botao:hover {
background-color:#FFFFFF;
opacity: 1;
filter: alpha(opacity=100%);
}
#mae {
width: 1050px;
margin: 0 auto;
padding: 0 auto;
}
img.linha {
margin-left:auto;
margin-right:auto;
margin-top:50px;
position:relative;
display:block;
}
img.linha2 {
margin-left:auto;
margin-right:auto;
margin-bottom:48px;
position:relative;
display:block;
}
h2.textomiddle {
font-size:2.5em;
color:#000000;
font-weight:normal;
font-style:italic;
text-align:center;
}
#dif1 {
width: 300px;
height: 300px;
float:left;
margin-left:10px;
display:block;
}
#dif2 {
width: 300px;
height: 300px;
float:left;
margin-left:65px;
}
#dif3 {
width: 300px;
height: 300px;
float:right;
margin-right:10px;
}
h3.meio {text-align:center; font-weight:normal; font-size:1.5em;}
p.meio {text-align:justify; position:relative; bottom:20px;]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="language" content="PT-BR">
<meta name="author" content="Douglas Mion">
<meta name="robots" content="index,follow,all">
<meta name="keywords" content="Arquitetura, projetos, obras, paisagismo, arquitetos, arquiteto">
<link id="favicon" rel="shortcut icon" href="/img/favicon/1x/favicon.png" type="image/png" />
<link rel="stylesheet" id="style" href="style2.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700" rel="stylesheet">
<title>CR6 ARQUITETURA</title>
</head>
<div id="background">
<div id="bar">
<img class="logotopo" src="img/cr6logo.png">
<nav id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="trabalhos.html">NOSSOS TRABALHOS</a></li>
<li><a href="quem.html">QUEM SOMOS</a></li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
</nav>
</div>
<h1 class="textomain">SOLUÇÃO COMPLETA EM ARQUITETURA</h1>
<div id="botao">
<a class="botao"href="contato.html">FAÇA UM ORÇAMENTO</a>
</div>
</div>
<div id="mae">
<img class="linha1" src="img/line.png">
<h2 class="textomiddle">"Empresa de arquitetura focada em atender as demandas de seu projeto com toda a excelência e qualidade"</h2>
<img class="linha2" src="img/line.png">
<div id="dif1">
<center><img class="meio" src="img/garantia-icon.png"></center>
<h3 class="meio">GARANTIA</h3>
<p class="meio">Nossa empresa oferece garantia de 5 anos para sua obra ou projeto, garantindo total satisfação do cliente e comprometimento da CR6.</p>
</div>
<div id="dif2">
<center><img class="meio" src="img/price-icon.png"></center>
<h3 class="meio">CUSTO</h3>
<p class="meio">Juntar a qualidade do nosso serviço com o baixo custo que oferecemos é com certeza a melhor opção para você economizar em sua obra/projeto.</p>
</div>
<div id="dif3">
<center><img class="meio" src="img/equipe-icon.png"></center>
<h3 class="meio">EQUIPE</h3>
<p class="meio">Juntar a qualidade do nosso serviço com o baixo custo que oferecemos é com certeza a melhor opção para você economizar em sua obra/projeto.</p>
</div>
</div>
width: 1050px;
e para o#bgmain
não com isso, ele fica pegando o tamanho do device enquanto (width: 100%
) enquanto os outros elementos estão com tamanho forçado. O melhor seria vc colocarwidth: auto
para tela pequenas com um media query