CSS Design simples, como tornar-lo responsivo?

Arthur Guillermo · 15 de janeiro de 2020

Bom pelo PC ta legal, porém pelo celular ou outro dispositivo não fica tão legal, é uma pagina simples com apenas 4 botões e 2 textarea ... tudo centralizado ... eu sempre fui pessimo com design então não faço a minima como colocar ele bem alinhado para todos os dispositivos

Basicamente é isso o codigo html:

<html> 
  <head> </head> 
  <body style="background-color:#00303b;"> <center> <br/>
  <textarea id="tocode" cols="55" rows="15" wrap="soft"></textarea><br/><br/> 
    <button onClick="code();">Codificar</button> 
    <button onClick="traduzir();">Traduzir</button> 
    <button onClick="copiar();">Copiar</button> 
    <button onClick="limpar();">Apagar</button><br/><br/> 
    <textarea id="result" cols="55" rows="15" disabled></textarea> </center> 
  </body> 
</html>

como esta pelo windows PC:

Alex SuBxZeRo · 17 de janeiro de 2020

Amigo voce pode fazer algo semelhante a isso:

<!DOCTYPE html>
<html> 
  <head> 
	<style>
		textarea{
			width:100%;
			max-width: 350px;
		}
	</style>
  </head> 
  <body style="background-color:#00303b;"> <center> <br/>
	<textarea id="tocode" rows="15" wrap="soft"></textarea><br/><br/> 
    <button onClick="code();">Codificar</button> 
    <button onClick="traduzir();">Traduzir</button> 
    <button onClick="copiar();">Copiar</button> 
    <button onClick="limpar();">Apagar</button><br/><br/> 
    <textarea id="result" rows="15" disabled></textarea> </center> 
  </body> 
</html>

Acredito que a forma mais pratica pra tornar sua aplicação em responsiva é utilizando "%", como a ideia era apenas deixar as laterais responsivas, retirei o "cols" de cada textarea, e definindo o width em 100%, e definindo u max-width para ele não ficar gigante em monitores maiores e etc.