Bom dia, sou iniciante de html e css e estava a fazer uma página para a faculdade. A página está feita e funciona bem em ecrã inteiro, porém se eu reduzir o tamanho da página no browser, já não fica formatada de modo a que se veja tudo. Poderiam-me ajudar a perceber como se faz? Junto envio o código todo da página. Cumprimentos
Assim a página está no tamanho normal Em tamanho reduzido fica assim e eu queria a mostrar as letras todas. Não queria letras escondidas.
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>