Why does not my page resize and how do I resize it?

Navigation
-3

Full screen looks like this:

ButwhenIputitonasmallerscreenitlookslikethis:

HTMLcode:

<!DOCTYPE><html><head><linkrel="stylesheet" href="_css/estilo.css">
    <meta charset="UTF-8">
    <title>--</title>

    </head>
    <body>
        <header>
                <p id="letreiro">MarceloSantos.com</p>

                <figure id="logo">
                <img src="_img/logo.png" alt="Um programador em seu PC">
                </figure>

                <nav id="menu">
                    <ul>
                        <li><a  href="#inicio">ÍNICIO</a></li>
                        <li><a  href="#portfolio">PORTFÓLIO</a></li>
                        <li><a  href="#redes-sociais">REDES SOCIAIS</a></li>
                        <li><a  href="#contato">CONTATO</a></li>
                    </ul>
                </nav>

            </header>

            <footer>

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

CSS Code: 

body {
}
#letreiro {
    font-size: 50px;
    font-family: courier, Charcoal, sans-serif;
    text-align: center;
    background-color: #2F4F4F;
    color: #BEBEBE;
    padding: 30px;
}
#menu ul {
    margin-left: 150px;
}
#menu ul li {
    font-size: 20px;
    font-weight: bold;
    color: #696969;
    font-family: impact;
    vertical-align: center;
    margin-left: 80;
    margin-right: 80;
    display: inline-block;  
}
#menu a {
    text-decoration: none;
    color: #696969;
}
#logo {
    position: absolute;
    left: 0;
    top: 0;
}
    
asked by anonymous 25.02.2018 / 00:53

2 answers

0

Study

As @hugocsl suggested: you should use media queries. This is nothing more than an instruction for the browser to load different CSS rules, according to the width of the device accessed or other conditions.

Example 

.box-1 {
  background-color: red;
  
  height: 100vh;
  width: 50%;
}

@media (min-width: 600px) { /* Novas regras, quando atinge 600px */
  width: 100%;
}
<div class="box-1">Ate cubanos</div>

In the code above, the box assumes the width of 50% on screens smaller than 600px. So when the screen width is 601px up, it takes 100% width.

Your case

Given what I explained, we can do something similar to the font-size property, which would be a solution for you. 

.box-1 {
  background-color: red;
  
  font-size: 20px;
  
  height: 100vh;
  width: 50%;
}

@media (min-width: 600px) { /* Novo tamnho de fonte, quando atinge 600px */
  font-size: 50px;
}
<div class="box-1">Ate cubanos</div>

Useful links

25.02.2018 / 01:37
0

In order to use px to set the font size, use vw (referring to the size of the viewport ). In this way, the font size will match the viewport size. 

font-size: 5vw; /* 5% da largura do viewport */

Example: 

#letreiro {
    font-size: 5vw;
    font-family: courier, Charcoal, sans-serif;
    text-align: center;
    background-color: #2F4F4F;
    color: #BEBEBE;
    padding: 30px;
}
#menu ul {
    margin-left: 150px;
}
#menu ul li {
    font-size: 20px;
    font-weight: bold;
    color: #696969;
    font-family: impact;
    vertical-align: center;
    margin-left: 80;
    margin-right: 80;
    display: inline-block;  
}
#menu a {
    text-decoration: none;
    color: #696969;
}
#logo {
    position: absolute;
    left: 0;
    top: 0;
}
<header>
   <p id="letreiro">MarceloSantos.com</p>
   <figure id="logo">
      <img src="_img/logo.png" alt="Um programador em seu PC">
   </figure>
   <nav id="menu">
      <ul>
         <li><a  href="#inicio">ÍNICIO</a></li>
         <li><a  href="#portfolio">PORTFÓLIO</a></li>
         <li><a  href="#redes-sociais">REDES SOCIAIS</a></li>
         <li><a  href="#contato">CONTATO</a></li>
      </ul>
   </nav>

</header>

<footer>
</footer>
    
25.02.2018 / 22:57
Concatenate WHILE Beginner's doubts [closed]