CSS Responsividade ou elementos mal utilizados?

[CaioNeves]

Então, tô fazendo um site para testar, porém quando muda a resolução as coisas ficam bem desalinhadas, queria saber se é por causa do meu código css e das propriedades que utilizei ou se é normal e agora só falta eu tratar a responsividade. No meu pc ele fica assim

 

Mas quando mudo a resolução

 

 

 

Quando a resolução é ainda maior

 

[Benjamim C.S]

Com certeza há algo de estranho no código aplicado. Por exemplo: na visão do seu PC dá pra se notar que os elementos do header não estão exatamente alinhados verticalmente, assim como o o conteiner de cadastro não parece ter uma largura fixa ao ver em telas maiores; o form também tá estranho, parece está com um position: absolute. Quais propriedades você usou para esse design? Há poucas técnicas de responsividades e algumas não muito bem aplicadas.

[CaioNeves]

@Benjamim C.S Então, o formulário está com um position absolute mesmo kkk

#cadastro{
        background-color: #202024;
        background-size: contain;
        border-radius: 10px;
        width: 400px;
        height: 405px;
        margin-left: 200px;
        margin-top: 70px;
        position: absolute;
        border-style: solid;
        border-right: none;
        border-top: none;
        border-color: orange;
        border-width: 2px;

Em relação aos elementos dentro do header, eu coloquei uma label e um ícone dentro de um link

<header>
		<nav>
			<a href="Básico.html" id="link-início">
			<img src="images/fox.png" alt="logo do site">
			<label id="nome-do-site">DevTool</label>
			</a>

E depois iniciei a lista normal, as linhas estão alinhadas porém o que está desalinhado é a "logo" e  o botão de criar conta que posicionei igual a logo.

[Benjamim C.S]

Opa, desculpa a demora.

 

Realmente, você precisa melhorar o seu código CSS mais ainda em relação a alinhamento, a estrutura HTML também precisa melhorar, coloque esse form e aquele elemento de mensagem dentro da tag section e defina-os como display: inline (uma forma de não usar o position no qual nesse caso não há necessidade), por exemplo.

 

Você no caso adequou os elementos da forma de como você visualiza na tela do seu PC e não recomendo isso, até porque uma hora vai quebrar. Ao invés disso já comece pondo práticas de responsividade. Aqui vai uma forma de ajudar:

• Aprenda o básico de responsividade (recomendo bastante este curso também, esse projeto no qual é abordado me ensinou muita coisa) e veja mais conceitos sobre e depois partir para flex e grid.

 

Tem bastante pontos a se acrescentar no seu projeto. Não sei qual curso esteja fazendo ou se está por conta própria, mas por agora recomedo a estudar um pouco mais sobre o que lhe falei e verá que não há necessidades de algumas propriedades, vai ajudar muito.

 

Bons estudos! 

[CaioNeves]

@Benjamim C.S Show mano, muito obrigado pelas dicas! Então, tô estudando CSS não faz muito tempo hehe, acho que não faz nem 1 mês kkk, vou procurar melhorar :)