Responsiveness error [closed]

Navigation
0

I'm following a material from caelum and I'm having trouble making a responsive page.

I would like it to look like this, but it's popping up like this 

.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>
    
asked by anonymous 10.10.2016 / 19:58

2 answers

0

Come on ... after seeing your code I found some problems.

In html, the meta tag viewport does this meta tag serve for the browser to understand what resolution it should take into account depending on the device. I advise putting it like this: 

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

However, it would be nice to take a look at in this article to better understand this.

Second problem. You are setting fixed sizes in the css on some elements, such as . and .container 940px, or # center-distribution * that is 550px.

So, you would have to use css media queries to change these sizes according to the resolution ( see this link ) or put the size of these elements in percentage so they adjust as the page decreases.

To summarize, your problem was viewport along with an element that was very large in size. This element made the page large, but not the top that was set percentage. It fit the viewport correctly, since the rest does not.

Well, I hope you understand.

    
12.10.2016 / 21:12
0

In your CSS put the style for your tag: 

ul{
   margin:0; 
   padding:0;
}

This sets the outer and inner margins to zero and should eliminate whitespace.

I did not test but should resolve.

    
10.10.2016 / 22:15
Spring Security Oauth + Firebase Problem with validation