0

Estou acompanhando um material da caelum e estou com dificuldade de fazer um página responsiva.Correto

Gostaria dela ficar assim, mas ela está aparecendo assim

inserir a descrição da imagem aqui

.container{
  width: 96%;
}
header h1{
  text-align: center;
}
header h1 img{
  max-width: 50%;
}
.sacola{
  display: none;
}
.menu-opcoes{
  position: static;
  text-align: center;
}
.menu-opcoes ul li{
  display: inline-block;
  margin: 5px;
}
  <head>
    <meta charset="UTF-8">
    <title>Sobre a Mirror Fashion</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/sobre.css">
    <link rel="stylesheet" href="css/sobre-mobile.css" media="(max-width: 939px)">
  </head>
  <body>
    <header class="container">
      <h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
      <p class="sacola">Nenhum item na sacola de compras</p>
      <nav class="menu-opcoes">
        <ul>
          <li><a href="#">Sua Conta</a></li>
          <li><a href="#">Lista de Desejos</a></li>
          <li><a href="#">Cartão Fidelidade</a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Ajuda</a></li>
        </ul>
      </nav>
    </header>

18
  • Você queria alinhas a div do conteúdo no centro da página? 10/10/2016 às 18:04
  • isso, eu criei duas páginas com o mesmo cabeçalho, na outra página deu certo, mas nessa não, quando vou inspecionar no google chrome, não sei como explicar esta área branca 10/10/2016 às 18:07
  • Tem como você editar a pergunta e colocar seu código html e css? 10/10/2016 às 18:11
  • Ve se você colocar isso aqui resolve: .container{ width: 96%; margin: 0 auto; } 10/10/2016 às 18:32
  • Infelizmente não 10/10/2016 às 18:34

2 Respostas 2

0

Vamos lá ... depois de ver seu código encontrei alguns problemas.

No html, exite a meta tag viewport, essa meta tag serve para o browser entender qual resolução ele deve levar em consideração dependendo do dispositivo. Eu aconselho colocar assim:

<meta name="viewport" content="width=device-width, initial-scale=1">

Porém seria bom dar uma olhada neste artigo para entender melhor sobre isso.

Segundo problema. Você está setando tamanhos fixos no css em alguns elementos, como por exemplo .corpo e .container que estão com 940px, ou #centro-distribuicao* que está com 550px.

Sendo assim, ou você teria que utilizar css media queries para alterar esses tamanhos de acordo com a resolução (veja este link) ou colocar o tamanho destes elementos em percentual para que eles se ajustem conforme diminuir a página.

Pra resumir, seu problema era o viewport junto com um elemento que etava com um tamanho muito grande, ou seja. Este elemento fazia a página ficar grande, porém não o topo que estava com percentual setado. Ele se encaixava ao viewport corretamente, já o restante não.

Bom, espero que tenha entendido.

2
  • Deu certo, obrigado!!!! O link sobre o css media queries não abriu, mas resolveu o problema aqui a sua dica. 12/10/2016 às 19:21
  • Que bom que deu certo! Editei o link, mas se procurar sobre media queries que vc vai achar bastante coisa. Abraço! 12/10/2016 às 19:23
0

No seu CSS coloque o estilo para sua tag:

ul{
   margin:0; 
   padding:0;
}

Isso define a margem externa e interna para zero e deve eliminar os espaços em branco.

Não testei mas deve resolver.

1
  • Obrigado pela ajuda, mas não deu certo 12/10/2016 às 18:13

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