Responsive site with side left

Asked

Viewed 318 times

2

I made a site "responsive" that on the mobile is left side, someone could help me?

Follow the HTML code:

 <!DOCTYPE HTML>
    <html lang=”pt-br”>
    <head>
       <meta charset=”UTF-8”>
       <meta name="author" content="Agencia de Marketing Digital Cmk">
       <meta name="description" content=" Agencia de Marketing digital em São Paulo CMK é uma empresa de marketing digital, que oferece serviços marketing digital para empresas." />
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
       <meta name="robots" content="index, follow">

    <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Pacifico' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/demo.css">
    <link rel=”shortcut icon” href=”imagens/favicon.ico.png” type=”image”/x.png />
    <!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ var widget_id = '0EpwwNMTu9';var d=document;var w=window;function l(){
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
<!-- {/literal} END JIVOSITE CODE -->

        <script language=“javascript” type=“text/javascript” src=“js/jquery.js”></script>
        <title>  Agencia de Marketing Digital - CMK</title>
        <link rel="apple-touch-icon" sizes="57x57" href="icon/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="icon/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="icon/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="icon/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="icon/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="icon/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="icon/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="icon/apple-icon-152x152.png">
       <link rel="apple-touch-icon" sizes="180x180" href="icon/apple-icon-180x180.png">
       <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
       <link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
       <link rel="icon" type="image/png" sizes="96x96" href="icon/favicon-96x96.png">
       <link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
       <link rel="manifest" href="icon/manifest.json">
       <meta name="msapplication-TileColor" content="#009fce">
       <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
       <meta name="theme-color" content="#009fce">

    </head>
    <body>

    <nav id="principal" class="fixed-nav" > 

      <ul>
            <li><a href="index.html" target="_self">HOME</a></li>
            <li><a href="#">[email protected]</a></li>
            <li><a href="https://api.whatsapp.com/send?phone=5511943276380"target="_blank">(11)&nbsp94327-6380 </a></li>
            <li><a href="#contato">SUPORTE</a></li>
            <li><a href="#contato">ORÇAMENTO</a></li>
        </ul>
    </nav >
<nav> 
<img src= "imagens/logo-cmk.png" alt="Agencia de Marketing Digital CMK Logotipo">
      <ul>
            <li><a href="index.html" target="_self">HOME</a></li>
            <li><a href="#agencia">AGÊNCIA</a></li>
            <li><a href="#servicos">SERVIÇOS</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#contato">CONTATO</a></li>
        </ul><br/><br/><br/><br/><br/>
    </nav>

<header>

        <a href="#servicos" target="_self" class="botao">VER MAIS</a>
<div class="social">
        <ul>
            <li><a href="https://www.facebook.com/agenciacmk.com.br/"target="_blank"><img src="icon/facebook.jpg" alt="facebook Agência de Marketing Digital" - cmk"></a></li>
            <li><a href="https://www.youtube.com/channel/UCTGRquW0dLmYZl_HowZvzkw"target="_blank"><img src="icon/youtube.jpg" alt="youtube Agência de Marketing Digital" - cmk"></a></li>
            <li><a href="https://br.linkedin.com/in/jeferson-marcelino-0795a6ab"target="_blank"><img src="icon/linkedin.jpg" alt="linkedin Agência de Marketing Digital" - cmk"></a></li>
            <li><a href="https://api.whatsapp.com/send?phone=5511943276380"target="_blank"><img src="icon/whatsapp.jpg" alt="whatsapp Agência de Marketing Digital" - cmk"></a></li>
            <li><a href="https://academy.exceedlms.com/student/catalog"target="_blank"><img src="icon/partner.jpg" alt="whatsapp Agência de Marketing Digital" - cmk"></a></li>
            <li><a href="#contato"target="_blank"><img src="icon/email.jpg" alt="email Agência de Marketing Digital" - cmk"></a></li>
        </ul>
    </div>

</header>

 <section id="home">
        <h2> Alta performance em inteligência de Marketing Digital.</h2>
        <p>  Você já tem um site, mas ninguém te encontra no Google ou fala sobre sua empresa nas redes sociais? <br/> 
             Você já tem um site que gera alguns contatos mas está precisando de muito mais?<br/>
             Você já tem um site, mas ele não gera nenhum contato produtivo?<br/>
             Você ainda não tem um site ou ele está obsoleto?</p>
        <a href="#contato" class="botao">ENTRE EM CONTATO</a>
   </section>

    <section id="agencia">
        <h2>AGÊNCIA</h2>
        <h2>Alta performance em inteligência de Marketing Digital.</h2>
        <a href="#contato" class="botao">ENTRE EM CONTATO</a>
    </section>

     <section id="servicos">
        <h2>SERVIÇOS</h2>
        <div class="efeito-grow">
            <a href="criacao-de-site.html" target="_self"><img src="imagens/site.png" alt="Agência de Marketing Digital" - cmk"></a> 
                        <h3>CRIAÇÃO DE SITE</h3>
         </div>


        <div class="efeito-grow" >
            <a href="google-adwords.html" target="_self"><img src="imagens/links-patrocinados.png" alt="Links Patrocinados" - cmk"></a>  
            <h3> GOOGLE ADWORDS </h3>

        </div>

        <div class="efeito-grow" >
             <a href="seo-otimizacao-de-sites.html" target="_self"><img src="imagens/consultoria.png"  alt="Marketing Digital Consultoria"></a>
            <h3>SEO - OTIMIZAÇÃO DE SITES</h3>
        </div>
       <div class="efeito-grow" >
              <a href="anunciar-no-facebook-ads.html" target="_self"><img src="imagens/facebook-ads.png"  alt="facebook Ads Consultoria"></a>
            <h3>ANUNCIE NO FACEBOOK ADS</h3>
        </div>

        <div class="efeito-grow" >
         <a href="consultoria-em-marketing-digital.html" target="_self"><img src="imagens/marketing-digital-consultoria.png" alt="Consultoria Markting digital"></a>
            <h3>CONSULTORIA EM MARKETING DIGITAL</h3>
        </div>
            </section>

        <section id="portfolio">
           <h2>PORTFÓLIO</h2>

    <ul class="portifolio">
    <li>
        <h2>E-Mail Marketing </h2>
        <p>Além de ser uma excelente ferramenta para sua empresa é uma das maneiras de crescer seu negócio!
         O email marketing é a comunicação entre uma empresa e seus consumidores ou potenciais clientes, via email.</p>
        <br/><br/><br/><a href="e-mail-marketing.html" target="_self" class="botao">VER MAIS</a>
    </li>

    </ul>
    <ul class="portifolio">
    <li>
        <h2> Conteúdo Digital </h2>
        <p>Marketing de Conteúdo é uma maneira de engajar com seu público-alvo e crescer sua rede de clientes e potenciais clientes através da criação de conteúdo relevante e valioso, atraindo, envolvendo e gerando valor para as pessoas de modo a criar uma percepção positiva da sua marca e assim gerar mais negócios.</p>
         <br/><a href="conteudo-digital.html" target="_self"  class="botao">VER MAIS</a>
    </li>

    </ul>
    <ul class="portifolio">
    <li>
        <h2>Google - Analytc </h2>
        <p>O principal benefício de usar esta ferramenta é conseguir mensurar o desempenho de todos os canais de entrada do site, sendo eles por campanhas de email marketing, Google Adwords, tráfego orgânico(SEO).</p>
      <br/><br/><br/><a href="google-analytc.html" target="_self"  class="botao">VER MAIS</a>   
   </li>

    </ul><br/>
    <ul class="portifolio">
    <li>
        <h2>Criação de Logomarcas </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
          <br/><br/><br/><a href="criacao-de-logomarcas.html" target="_self" class="botao">VER MAIS</a>
    </li>

    </ul>
    <ul class="portifolio">
    <li>
        <h2>vídeos Corporativos </h2>
        <p>Vídeo institucional é um meio de comunicação que diminui a distância entre empresas e consumidores, transmitindo maior confiança e gerando grandes resultados para sua marca.</p>
          <br/><br/><br/><a href="videos-corporativos.html" target="_self" class="botao">VER MAIS</a>
    </li>

    </ul>
    <ul class="portifolio">
    <li>
        <h2>inbound marketing</h2>
        <p>   
Inbound Marketing é qualquer estratégia de marketing que visa atrair o interesse das pessoas. Também é chamado de marketing de atração e possui três grandes pilares: SEO, Marketing de Conteúdo e Estratégia em Redes Sociais.</p>
        <br/><br/><a href="inbound-marketing.html" target="_self" class="botao">VER MAIS</a>
    </li>

    </ul>

    </section>

    <section id="contato">
        <h1>CONTATO</h1>
        <form method="post" id="fContato" action="contato@agênciacmk.com.br">
         <fieldset id="geral">
            <fieldset id="usuario">           
          <legend><h2>Identificação do Usuário</h2></legend>
         <p><label for="cNome">Nome: </label><input type="text" name="tnome" id="cNome" size="20" maxlength="35" placeholder="Nome Completo"/></p>
         <p><label for="cfone">Telefone: </label><input type="tel" name="TFone" id="cfone" required="required" maxlength="15" name="phone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" /></p>
         <p><label for="cmail">E-mail: </label><input type="email" name="tMail" id="cmail" size="20" maxlength="40"/></p>

      </fieldset> 

       <fieldset id="assunto">
        <legend><h2>Assunto</h2></legend>
             <input type="radio" name="tBola" id="Ccria"/> <label for="Ccria">Criação de Site</label><br/>
             <input type="radio" name="tBola" id="Cgoo"/> <label for="Cgoo">Google Adwords</label><br/>
             <input type="radio" name="tBola" id="Cface"/> <label for="Cface">Facebook ADS</label><br/>
             <input type="radio" name="tBola" id="Cconsu"/> <label for="Cconsu">Cosultoria em Marketing Digital </label>
        </fieldset> 
        <input type="submit" value="Enviar" />
        </fieldset> 



      </form>
    </section>

    <footer >


        <div id="a-b-c">

        <div class="box">

            <h3>MENU RÁPIDO </h3><hr>
            </a>
             <p><a href="index.html" target="_self">  &rarr; Home &larr; </a></p>
             <p><a href="criacao-de-site.html" target="_self"> &rarr; Criação de Site &larr;  </a></p>
             <p><a href="google-adwords.html" target="_self"> &rarr; Google Adwrords &larr;  </a></p>
             <p><a href="seo-otimizacao-de-sites.html" target="_self"> &rarr; SEO - Otimização de Site &larr;  </a></p>
             <p><a href="anunciar-no-facebook-ads.html" target="_self"> &rarr; Anuncie no Facebook ADS &larr;  </a></p>
             <p><a href="consultoria-em-marketing-digital.html" target="_self"> &rarr; Consultoria em Marketing Digital &larr;  </a></p>


        </div>


        <div class="box left">

            <img src= "icon/icon-whatsapp-01.png">&nbsp; <img src= "icon/icon-tel-01.png"> <img src= "icon/icon-endereco-01.png"> <img src= "icon/icon-face-01.png">

            <h3>ENDEREÇO | SUPORTE</h3><hr>
            <p><a href="#contato" class="botao"> Suporte. </a></p>
                    <p><a href="https://www.facebook.com/agenciacmk.com.br/"target="_blank"> Facebook. </a></p>
            <p> contato@agênciacmk.com.br . </p>
            <p><a href="https://api.whatsapp.com/send?phone=5511943276380"target="_blank"> Tel: (11) 94327-6380|98320-9602. </a></p>
            <p>Segunda a Sexta | Das 9:00Hs às 18:00Hs.</p>
            <p> R: Campo das Pitangueiras N°540 | Sala 34 - SP.</p>


        </div>

        <div class="box left">

            <h3>ACESSO RÁPIDO</h3><hr>

             <p><a href="e-mail-marketing.html" target="_self"> &rarr; E-mail Marketing &larr;  </a></p>
             <p><a href="conteudo-digital.html" target="_self"> &rarr; Conteúdo Digital &larr;  </a></p>
             <p><a href="google-analytc.html" target="_self">&rarr; Google - Analytc &larr;  </a></p>
             <p><a href="criacao-de-logomarcas.html" target="_self"> &rarr; Criação de Logomarcas &larr;  </a></p>
             <p><a href="videos-corporativos.html" target="_self"> &rarr; vídeos Corporativos &larr;  </a></p>
             <p><a href="inbound-marketing" target="_self">&rarr; inbound marketing &larr;  </a></p><br/>


        </div>

        <div>
            <p>Copyright &copy; Todos os direitos reservados Agência de Marketing Digital - CMK 2018 </p><hr>
        </div>
    </div>

     </ul>
      </footer>
    </body>
    </html>

CSS:

/*GERAL*/
body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #4d4d4d;
}

h1, h2, h3 {
    margin: 0;
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.botao {
    color: #f1f1f1;
    text-decoration: none;
    padding: 10px 30px;
    background-color: #747d8c;
    font-size: .9em;
    border-radius: 3px;
}

/*NAVEGAÇÃO*/

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    margin: 23px 0px 0px 0px;
}

nav img {

   padding: 0px;
   margin: 0px 0px 0px;

}
nav > a {
    text-decoration: none;
    font-weight: 700;
    font-size: 28px;
    font-family: Pacifico, serif;       
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;        
}

nav ul li {
    text-align: center;
    width: 100%;
    padding: 0px;       
}

nav ul li a {
    display: inline-block;
    padding: 0px;
    width: 100%;
    text-decoration: none;
    color: #2d3436;       
}
nav a:hover {
    background:#497daf; 
    color:#ffffff;
    padding: 0px;
}

/*
NAVEGAÇÃO MENU FIXO CSS3
*/
nav.fixed-nav {
    position: fixed;
    width:100%;
    top:0;
    left:0px;
    z-index:999;

}

/*
FORMATAÇÃO DO MENU 1
*/


#principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #747d8c;
    margin: 0px 30px 0px 0px;



}
#principal > a {
    text-decoration: none;
    font-family: Pacifico, serif;


}
#principal ul {
    list-style: none;
    padding: 0px 0;
    display: flex;
    flex-direction: row;
    align-items:  flex-start;
    width: 50%;
    margin: 12px;
}

#principal ul li: {
    width: 100%;
    text-align: center;

}

#principal ul li a {
    display: inline-block;
    padding: 0px 0;
    width: 100%;
    text-decoration: none;
    color: #ffffff;
    font-weight: 300;
    font-size: 11px;
    margin: 0px 50px 0px 0px; 

}
#principal a:hover {
    background:#ffffff; 
    color:#353b48;
}
/*
IMAGENS REDES SOCIAIS
*/
#principal ul img {
    width: flex;
    height: flex;
    position: absolute; 
    top: 15px; 
    left:1000px;
}



/*
CABEÇALHO
*/

header {
    background-image: url('../imagens/fundo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #1e272e;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 100px;


    }

header a {
   margin-top: 80px;
}
/*HOME*/
#home {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px 20px 20px 0px;
    background-color: #497DAF;
    color: #f1f1f1;
}

#home p {
    margin-bottom: 0.5em;
    max-width: 1000px;
}

#home .botao {
    background-color: #f1f1f1;
    color: #4d4d4d;
    margin-top: 0px
}


/*
AGÊNCIA
*/

#agencia {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f6fa;
}

#agencia div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px;
}

/*
SERVIÇOS
*/

#servicos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 5px;

}

#servicos h2 {
    margin-bottom: 20px;

}

#servicos img {
    width: 40%;
}

/*
SERVIÇOS FOTOS
*/
.efeito-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.efeito-grow:hover, .efeito-grow:focus, .efeito-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/*
PORTFOLIO
*/

#portfolio {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f6fa;

}
#portfolio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px; 
}
#portfolio h2 {
    margin-bottom: 20px;
}

#portfolio img {
    width: 100%;
}


/*
SERVIÇOS PORTFOLIO
*/
.portifolio {
    position: center;
    width:310px; 
    height:200px;
    margin-right: 5px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-align: justify-content;
    background-color:rgba(26,76,110,0.5)

}

.portifolio li{
 list-style: none;
}

.portifolio:hover{

        background:#53a7ea;
}

.portifolio:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

.portifolio p,.portifolio h2, .portifolio a{
    color:#fff;
    left:-20px;
    top:20px;
    position:relative;
}
.portifolio p {
    font-family:'Lato';
    font-size:14px;
    line-height:18px;
    margin:0

}
.portifolio h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.portifolio a {
    font-family: "Roboto Slab",
    font-size:16px;
    line-height:24px;
    padding: 10px; 10px 10px 10px;

}


/*
CONTATO
*/

#contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0px;
    margin: 0 auto;

}



/*
FOOTER
*/

footer {
    display: flex;
    text-align: center;
    padding: 10px;
    background-color: #747d8c;
    color: #f1f1f1;

}



/*
FOOTER LADO A LADO
*/

  .box {
            width: 330px;
            height: auto;
            float: left;
            text-align

        }

        div#a-b-c {
            width: 1050px;
            height: auto;
            margin: auto;
        }

        div#a-b-c h3 {
        text-align: left;
        display: inline;

        }

        div#a-b-c p {
        text-align: height;
        display: block;
        font-size: 14px;


        }
        .left {
            margin-left: 20px;
        }

 .box a {
        text-decoration:none; 
        color:#FFFFFF;

        }

/*
MEDIA QUERIES
*/

@media screen and (min-width: 0px) and (max-height: 1200px) {
    /*
    NAVEGAÇÃO
    */
    nav {
        flex-direction: row;
        justify-content: space-around;
    }

    nav ul {
        flex-direction: row;
        width: 70%;
    }

    /*
    CABEÇALHO
    */

    header {
        height: 600px;
        height: 60vh;
        justify-content: center;
    }

    /*
    SOBRE
    */

    #sobre {
        height: 250px;
        height: 30vh;
        justify-content: center;
        min-height: 250px;
    }

    /*
    SERVIÇOS
    */

    #servicos {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        max-width: 1000px;
        margin: 0 auto;
    }

    #servicos h2 {
        text-align: center;
        width: 100%;
    }

    #servicos div {
        flex-grow: 1;
        flex-basis: 150px;
        padding: 0 10px;
    }

    /*
    PORTFOLIO
    */

    #portfolio {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #portfolio h2 {
        width: 100%;
        text-align: center;
    }

    #portfolio img {
        width: 33.3333333333%;
    }

    /*
    CONTATO
    */

    #contato {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 500px;
        min-width: 360px;
        margin: 0 auto;
    }

    #contato h2,
    #contato p {
        width: 100%;
    }

}
css responsive-layout responsive

  • As you are a new member of the community, I suggest you read these help topics: how to ask and how to create an example. It’s no use posting all the code if you don’t make it an example of what’s going on, then we can’t help you

1 answer

0

The problem with the margin is that you didn’t eliminate the margin pattern of body. To resolve just include in your CSS margin: 0 at the body:

body{
   margin: 0;
}

Only the nav that occupies the whole width because you put fixed on the property position of his. The fixed does not obey the margins of body. The rest of the page will fit within the default margin of body, so the spaces not just on the sides. If you go down the entire site you will see that there is also a spacing on the bottom edge.

  • Oops! Thank you very much for the help, I performed the procedure but there is still room, I thought at first it was the form, I re-read it and improved the space a little more yes it has... Would you have any other suggestions? Thanks in advance.

  • I’d have to see the site. It’s online?

  • www.agencia.cmk.com.br kindly analyzes it on mobile device.

  • The link did not open.

  • I was updating I think when you tried to open - www.agenciacmk.com.br please can check now thank you..

  • I was looking and I saw there’s a mistake: <script language=“javascript” type=“text/javascript” src=“js/jquery.js”></script>&#xA;... see that you are using English quotation marks... I believe that prevents the loading of jQuery

  • Blz I’ll check and say hello!!! I’m not using jQuery just the same css.

  • The mistake is in MEDIA QUERIES. 1) Nav id="main" class="Fixed-Nav" > 2) <Section id="portfolio"> 3) <footer > ....

Show 3 more comments

Browser other questions tagged css responsive-layout responsive

You are not signed in. Login or sign up in order to post.