0

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.

VERSÃO DESKTOP VERSÃO MOBILE

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>

17
  • Em qual aparelho você testou? vi aqui pelo emulador de chrome e funcionou certinho o layout Commented 29/11/2017 às 23:52
  • @fernandoandrade testei em mais de 3 celulares diferentes e a barra branca na direita continua. Este é o site: www.cr6arquitetura.com.br Commented 29/11/2017 às 23:53
  • Opa, no site fica realmente, tinha copia seu código, vou ver aqui então se posso te ajudar ... Commented 29/11/2017 às 23:56
  • Obrigado meu amigo! Estou a dois dias tentando resolver esse problema e estou me matando pra resolver haha Commented 29/11/2017 às 23:57
  • O problema é que você definiu para alguns elementos 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 colocar width: auto para tela pequenas com um media query Commented 30/11/2017 às 0:02

1 Resposta 1

0

Você definiu o width para alguns elementos da página e para os que estão com a "barra" não. E também as imagens que estão sendo mostradas no tamanho real. Basta fazer assim:

#paisapro, .linha1, .linha2, .linha3, .paisapro {
    max-width: 100%;
}

#mae {
    width: auto;
}

@media only screen and (min-width : 992px) {
    #mae  {
        width: 1050px;
    }
}
1
  • Completamente resolvido!! Muito obrigado! Commented 30/11/2017 às 4:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .