How to reduce page size without formatting

Question

How to reduce page size without formatting

Asked 4 years, 11 months ago

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 In small size it looks like this and I wanted to show all letters. I didn’t want hidden letters.

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>

1 answer

Browser other questions tagged html css

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

by hugocsl • **65,517** points · Answer 1 · 2019-10-25T11:01:02+00:00

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

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>