Why doesn’t my page resize and how to make it resize?

Asked

Viewed 120 times

-3

In full screen is like this: inserir a descrição da imagem aqui

But when I put it on a smaller screen it looks like this: inserir a descrição da imagem aqui

HTML code:

<!DOCTYPE>
<html>
    <head>
    <link rel="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;
}
html css html5

  • Read these two articles https://tableless.com.br/introducao-sobre-media-queries/ and here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Media_queries

  • The page is resizing. It seems that the only problem is the font size of the text at the top, which does not track resizing.

2 answers

0

In on of use px to set the font size, use vw (concerning the size of viewport). This way, the font size will track the size of the viewport.

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>

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 above code, the box assumes 50% width on screens smaller than 600px. Therefore, when the screen has 601px width up, it assumes width of 100%.

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

Browser other questions tagged html css html5

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