How to reduce page size without formatting

Asked

Viewed 62 times

0

Good morning, I’m a beginner in html and css and I was doing a page for college. The page is done and works well in full screen, but if I reduce the size of the page in the browser, it is no longer formatted so that you see everything. Could you help me understand how to do it? I enclose the entire code of the page. Regards

So the page is in normal size Assim a página está no tamanho normal In small size it looks like this and I wanted to show all letters. I didn’t want hidden letters.

inserir a descrição da imagem aqui

body{
    margin: 0;
    padding: 0;
}

#fundo{
    margin: 0;
    padding: 0;
    background-color:white;
    width: 100%;
    position: absolute;
    display:flex;
    flex-direction: row;
    justify-content: center;
    left: 0;
    top: 145px;
}

#cabfundo{
    position: absolute;
    background-color: #29b0c5;
    width: 100%;
    height: 145px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    border-bottom:4px solid blue;
}

#cabmeio{
    margin: 0;
    padding: 0;
    background-color: #13c7eb;
    width: 700px;
    height: 100%;
    position: absolute;
    top: 0;
}

#menu{
    background-color: blue;
    position: absolute;
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 17px;
    padding-left: 10px;
    padding-right: 10px;
    left: 25px;
    bottom: -18px; 
    overflow: hidden;
    z-index: 2
}

#nome{
    margin-bottom: 0px;
    margin-top: 50px;
    margin-left: 50px;
    color: #125f6d;
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

#homepage{
    color: #2d6974;  
    font-size: 17px;
    margin-left: 50px;
    margin-top: 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
}
#zonatexto{
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    width: 700px;
    position: relative;
    top: 0;
}


.texto{
    margin: 7px;
    margin-left: 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: black;
}

.texto1{
    width: 100%;
    margin: 0;
    padding-bottom: 14px;
    border-bottom:3px solid blue;
}

.texto2{
    margin: 0;
    padding: 0;
}

#texto1{
    width: 100%;
    margin: 0;
    padding-bottom: 14px;
}

#img{
    position: relative;
    width: 25%;
    height: 25%;
    bottom:20px;
    border: 1.3px solid black;
    padding: 4px;
    margin-right: 30px;
    float: right;
}

.h2{
    margin-top: 30px;
    margin-left: 50px;
    margin-bottom: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 21px;
    font-weight: bold;
    color: black;
}

.box{
    margin-left: 50px;
    height: 158px;
    margin-top: 10px;
}
#amensagem{
    position: relative;
    left: 10px;
    top: -11px;
    background-color: white;
    width: 107px;
}

.input{
    padding-left: 2px; 
    padding-right: 2px;
}
.linhatexto{
    margin: 10px;
    height: 3px;
    background-color: #2d6974;
    position: relative;
    margin-bottom: -15px;
    margin-top: 20px;
}

.box{
    border: 1.5px solid black;
    margin-right: 20px;
}

input{
    float: right;
    margin-right: 20px;
    border: 1.5px solid black;
    width: 504px;
}

textarea{
    resize: none;
    float: right;
    margin-right: 20px;
    border: 1.5px solid black;
    width: 504px;
    padding-left: 2px;
    padding-right: 2px;
}

.mensagem{
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    top: -20px;
}



.lista li{
    display: inline;
    text-align: center;
}

.elemento{
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 90%;
    color:white;
}
#botaoenviar{
    border: none;
    width: auto;
    background-color: #0e62cf;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

li{
    margin-top: 3px;
    margin-bottom: 3px;
}

#fundocompleto{
    margin: 0;
    padding: 0;
    background-color: #919191;
    width: 100%;
    height: 90px;
    position: absolute;
    left: 0;
    bottom: -90px;
    display:flex;
    flex-direction: row;
    justify-content: center;
}

#cabecalho{
    margin: 0;
    padding: 0;
    background-color: #919191;
    width: 700px;
    height: 100%;
    position: absolute;
    top: 0;
}
#cab{
    position: absolute;
    top: 5px;
    left:0px;
    height: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
<!DOCTYPE html>
<html lang="pt">
<head>
    <title>Ficha6</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
</head>
<body>
   <!-- cabecalhos -->
   <div id="cabfundo">
    <div id="cabmeio">
        <header>
            <h1 id="nome">Gonçalo Costa</h1>
            <h4 id="homepage">homepage</h4>
        </header>
        <nav id="menu">
            <ul class="lista" style="padding-left: 0px;">
                <li class="elemento">Quem Sou  |</li>
                <li class="elemento">Contacte-me  |</li>
                <li class="elemento">Links</li>
            </ul>
        </nav>
    </div>

    <!-- fundo -->

    <div id="fundo">
        <div id="zonatexto">
            <div class="texto1">
                <figure id="img">
                   <img src="hack.jfif" style="width: 100%; height: 100%;">
                </figure>
                <div  class="texto2">
                    <h2 class="h2">Quem sou</h2>
                    <p class="texto"><b>Nome: </b>Gonçalo Costa</p>
                    <p class="texto"><b>Idade: </b> 18 anos</p>
                    <p class="texto"><b>Atividade: </b> estudante</p>
                    <p class="texto"><b>Onde vivo: </b> Viseu</p>
                </div>
            </div>
            <div class="texto1">
                <div  class="texto2">
                    <h2 class="h2">Contacte-me</h2>
                    <div class="box">
                        <form>
                        <div id="amensagem">
                            <p class="texto" style="margin:0; margin-left: 3px;">A sua mensagem</p>
                        </div>

                        <div class="mensagem">
                            <input class="input" type="text">
                            <p class="texto" style="margin-left: 12px;">Nome:</p>
                        </div>

                        <div class="mensagem">
                            <input class="input"type="text">
                            <p class="texto" style="margin-left: 12px;">Email:</p>
                        </div>

                        <div class="mensagem" style="height: 48px;">
                            <textarea rows="3"></textarea>
                            <p class="texto" style="margin-left: 12px;">Mensagem:</p>
                        </div>

                        <div class="mensagem">
                            <input id="botaoenviar" type="submit" value="Enviar">
                        </div>
                        </form>
                    </div>
                </div>
            </div>

            <div id="textolinks">
                <nav  class="texto2">
                    <h2 class="h2">Os meus links favoritos: </h2>
                    <ul class="texto">
                        <li>Youtube</li>
                        <li>Twitter</li>
                        <li>Instagram</li>
                    </ul>
                </nav>
            </div>
        </div>

        <div id="fundocompleto">
            <footer id="cabecalho">
                <div id=cab>
                    <ul class="lista">
                        <li><u>Quem Sou  |</u></li>
                         <li><u>Contacte-me  |</u></li>
                         <li><u>Links </u></li>
                     </ul>
                </div>
            </footer>
        </div>
    </div>
</div>
</body>
</html>

html css

1 answer

2


Guy without code has many CSS errors, but first I highly recommend that you study a lot position, to understand what it is position:absolute/relative. Also, you put some elements with fixed px width, like 504px, ai when the screen is smaller than this the element that has width defined in px breaks the layout. Basically I corrected it and was even very responsive. Look at the image, the code is below

inserir a descrição da imagem aqui

Follow the complete code, now you can go adjusting small details like margin and padding to stay more aligned to your taste.

<!DOCTYPE html>
<html lang="pt">
<head>
  <title>Ficha6</title>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
  body{
  margin: 0;
  padding: 0;
}

#fundo{
  margin: 0;
  padding: 0;
  background-color:white;
  width: 100%;
  position: absolute;
  display:flex;
  flex-direction: row;
  justify-content: center;
  left: 0;
  top: 145px;
}

#cabfundo{
  position: absolute;
  background-color: #29b0c5;
  width: 100%;
  height: 145px;
  display:flex;
  flex-direction: row;
  justify-content: center;
  border-bottom:4px solid blue;
}

#cabmeio{
  margin: 0;
  padding: 0;
  background-color: #13c7eb;
  width: 700px;
  height: 100%;
  position: relative;
  top: 0;
}

#menu{
  background-color: blue;
  position: absolute;
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 17px;
  padding-left: 10px;
  padding-right: 10px;
  left: 25px;
  bottom: -18px; 
  overflow: hidden;
  z-index: 2
}

#nome{
  margin-bottom: 0px;
  margin-top: 50px;
  margin-left: 50px;
  color: #125f6d;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
}

#homepage{
  color: #2d6974;  
  font-size: 17px;
  margin-left: 50px;
  margin-top: 0;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: bold;
}
#zonatexto{
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  width: 700px;
  position: relative;
  top: 0;
}


.texto{
  margin: 7px;
  margin-left: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: black;
}

.texto1{
  width: 100%;
  margin: 0;
  padding-bottom: 14px;
  border-bottom:3px solid blue;
}

.texto2{
  margin: 0;
  padding: 0;
}

#texto1{
  width: 100%;
  margin: 0;
  padding-bottom: 14px;
}

#img{
  position: relative;
  width: 25%;
  height: 25%;
  bottom:20px;
  border: 1.3px solid black;
  padding: 4px;
  margin-right: 30px;
  float: right;
}

.h2{
  margin-top: 30px;
  margin-left: 50px;
  margin-bottom: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 21px;
  font-weight: bold;
  color: black;
}

.box{
  margin-left: 50px;
  /* height: 158px; */
  margin-top: 10px;
}
#amensagem{
  position: relative;
  left: 10px;
  top: -11px;
  background-color: white;
  width: 107px;
}

.input{
  padding-left: 2px; 
  padding-right: 2px;
}
.linhatexto{
  margin: 10px;
  height: 3px;
  background-color: #2d6974;
  position: relative;
  margin-bottom: -15px;
  margin-top: 20px;
}

.box{
  border: 1.5px solid black;
  margin-right: 20px;
}

input{
  float: right;
  margin-right: 20px;
  border: 1.5px solid black;
  width: 80%;
}

textarea{
  resize: none;
  float: right;
  margin-right: 20px;
  border: 1.5px solid black;
  width: 80%;
  padding-left: 2px;
  padding-right: 2px;
}

.mensagem{
  position: relative;
  margin-top: 15px;
  margin-bottom: 15px;
  top: -20px;
}



.lista li{
  display: inline;
  text-align: center;
}

.elemento{
  padding-left: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 90%;
  color:white;
}
#botaoenviar{
  border: none;
  width: auto;
  background-color: #0e62cf;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
}

li{
  margin-top: 3px;
  margin-bottom: 3px;
}

#fundocompleto{
  margin: 0;
  padding: 0;
  background-color: #919191;
  width: 100%;
  height: 90px;
  position: absolute;
  left: 0;
  bottom: -90px;
  display:flex;
  flex-direction: row;
  justify-content: center;
}

#cabecalho{
  margin: 0;
  padding: 0;
  background-color: #919191;
  width: 700px;
  height: 100%;
  position: relative;
  top: 0;
}
#cab{
  position: absolute;
  top: 5px;
  left:0px;
  height: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
  </style>
</head>
<body>
 <!-- cabecalhos -->
 <div id="cabfundo">
  <div id="cabmeio">
      <header>
          <h1 id="nome">Gonçalo Costa</h1>
          <h4 id="homepage">homepage</h4>
      </header>
      <nav id="menu">
          <ul class="lista" style="padding-left: 0px;">
              <li class="elemento">Quem Sou  |</li>
              <li class="elemento">Contacte-me  |</li>
              <li class="elemento">Links</li>
          </ul>
      </nav>
  </div>

  <!-- fundo -->

  <div id="fundo">
      <div id="zonatexto">
          <div class="texto1">
              <figure id="img">
                 <img src="hack.jfif" style="width: 100%; height: 100%;">
              </figure>
              <div  class="texto2">
                  <h2 class="h2">Quem sou</h2>
                  <p class="texto"><b>Nome: </b>Gonçalo Costa</p>
                  <p class="texto"><b>Idade: </b> 18 anos</p>
                  <p class="texto"><b>Atividade: </b> estudante</p>
                  <p class="texto"><b>Onde vivo: </b> Viseu</p>
              </div>
          </div>
          <div class="texto1">
              <div  class="texto2">
                  <h2 class="h2">Contacte-me</h2>
                  <div class="box">
                      <form>
                      <div id="amensagem">
                          <p class="texto" style="margin:0; margin-left: 3px;">A sua mensagem</p>
                      </div>

                      <div class="mensagem">
                          <input class="input" type="text">
                          <p class="texto" style="margin-left: 12px;">Nome:</p>
                      </div>

                      <div class="mensagem">
                          <input class="input"type="text">
                          <p class="texto" style="margin-left: 12px;">Email:</p>
                      </div>

                      <div class="mensagem" style="height: 48px;">
                          <textarea rows="3"></textarea>
                          <p class="texto" style="margin-left: 12px;">Mensagem:</p>
                      </div>

                      <div class="mensagem">
                          <input id="botaoenviar" type="submit" value="Enviar">
                      </div>
                      </form>
                  </div>
              </div>
          </div>

          <div id="textolinks">
              <nav  class="texto2">
                  <h2 class="h2">Os meus links favoritos: </h2>
                  <ul class="texto">
                      <li>Youtube</li>
                      <li>Twitter</li>
                      <li>Instagram</li>
                  </ul>
              </nav>
          </div>
      </div>

      <div id="fundocompleto">
          <footer id="cabecalho">
              <div id=cab>
                  <ul class="lista">
                      <li><u>Quem Sou  |</u></li>
                       <li><u>Contacte-me  |</u></li>
                       <li><u>Links </u></li>
                   </ul>
              </div>
          </footer>
      </div>
  </div>
</div>
</body>
</html>

  • Thank you very much for your help and response. It’s natural that there are still many CSS errors, I had only 1 CSS lesson, and we were asked to make a page like this. Thank you very much

  • @Cool Ianmoone then focuses on studying the fundamentals, mainly position and display, these two things are pretty much the basis for everything in CSS. Success

  • 1

    Yes, I will do that. I’m just getting started, I still have a lot to learn and perfect

Browser other questions tagged html css

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