Repairing Cell Phone x Desktop

Navigation
0
Well, guys, good night. I have been trying to set up my website since early. It works perfectly in the desktop version and in the mobile version it creates a blank part. I already tried everything to solve and I can not. 

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>
    
asked by anonymous 30.11.2017 / 00:35

1 answer

0

You have set width to some elements of the page and to those with "no". And also the images that are being shown in real size. Just do it like this: 

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

#mae {
    width: auto;
}

@media only screen and (min-width : 992px) {
    #mae  {
        width: 1050px;
    }
}
    
30.11.2017 / 01:13
How to make a radiobox call list with laravel? tawk.to how to change an iframe that has! important to force left align?