Heledbox Help - должна быть отзывчиво ⇐ Html

[Anonymous]

Как сделать мой код отзывчивым? Я хочу, чтобы прокрутка была добавлена ​​на всю страницу, когда Flexbox завершается новой линией, а не только в Div Flexbox. Я почти ничего не понимаю о Frontend, и это на самом деле учебный проект, но я не могу найти ответ на мою проблему нигде. Как бы вы сделали этот код отзывчивым? Я могу предоставить ссылку GitHub, если это необходимо. < /P>
"use client";
import "./cadastrar-usuario.css";
import BotaoRedondo from "../components/botaoRedondo/botaoRedondo";
import { useState } from "react";
import BotaoRedondoSubmit from "../components/botaoRedondoSubmit/botaoRedondoSubmit";

export default function CadastroUsuario() {
const [formData, setFormData] = useState({
primeiroNome: "",
ultimoNome: "",
usuario: "",
email: "",
senha: "",
confirmarSenha: "",
});

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};

const [erro, setErro] = useState();

const handleSubmit = async (e) => {
e.preventDefault();

// Erro: As senhas devem coincidir
if (formData.senha !== formData.confirmarSenha) {
setErro("Erro! As senhas não coincidem!");
return;
}

setErro("");

try {
const response = await fetch("http://localhost:8000/en/api/users/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body:
JSON
.stringify({
first_name: formData.primeiroNome,
last_name: formData.ultimoNome,
username: formData.usuario,
email: formData.email,
password: formData.senha,
}),
credentials: "include",
});

if (!response.ok) {
const errorData = await response.json();
const firstKey =
Object
.keys(errorData)[0];
const errorMessage = errorData[firstKey]?.[0];
setErro(errorMessage);
return;
}

const data = await response.json();

console
.log(data);

window
.location.href = "/login";
} catch (error) {

console
.error(error);
setErro("Erro inesperado! Tente novamente mais tarde!");
}
};
return (






Cadastrar-se
{erro && & l t ; d i v c l a s s N a m e = & q u o t ; e r r o & q u o t ; & g t ; { e r r o } & l t ; / d i v & g t ; } < b r / > & l t ; / d i v & g t ; < b r / >

Primeiro nome:


Último nome:


Usuário:





E-mail:


Senha:


Confirmar senha:







);
}
"use client";
import "./cadastrar-usuario.css";
import BotaoRedondo from "../components/botaoRedondo/botaoRedondo";
import { useState } from "react";
import BotaoRedondoSubmit from "../components/botaoRedondoSubmit/botaoRedondoSubmit";

export default function CadastroUsuario() {
const [formData, setFormData] = useState({
primeiroNome: "",
ultimoNome: "",
usuario: "",
email: "",
senha: "",
confirmarSenha: "",
});

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};

const [erro, setErro] = useState();

const handleSubmit = async (e) => {
e.preventDefault();

// Erro: As senhas devem coincidir
if (formData.senha !== formData.confirmarSenha) {
setErro("Erro! As senhas não coincidem!");
return;
}

setErro("");

try {
const response = await fetch("http://localhost:8000/en/api/users/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
first_name: formData.primeiroNome,
last_name: formData.ultimoNome,
username: formData.usuario,
email: formData.email,
password: formData.senha,
}),
credentials: "include",
});

if (!response.ok) {
const errorData = await response.json();
const firstKey = Object.keys(errorData)[0];
const errorMessage = errorData[firstKey]?.[0];
setErro(errorMessage);
return;
}

const data = await response.json();
console.log(data);

window.location.href = "/login";
} catch (error) {
console.error(error);
setErro("Erro inesperado! Tente novamente mais tarde!");
}
};
return (






Cadastrar-se
{erro && {erro}}



Primeiro nome:


Último nome:


Usuário:





E-mail:


Senha:


Confirmar senha:







);
}

.pagina-contatiner {
display: flex;
overflow-y: auto;
}

html, body {
height: 100%; /* Garantir que o body ocupe 100% da altura */
overflow-y: auto; /* Permite a rolagem */
margin: 0; /* Remover margens padrão */
}

.background-img {
position: fixed; /* Mantém a imagem fixa no fundo */
top: 0;
left: 0;
width: 100%;
height: 100%; /* Cobrir toda a tela */
background-image: url('../../../public/images/login-background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1; /* Manter a imagem atrás de todos os outros conteúdos */
}

.menu {
position: fixed; /* Fixa o menu no fundo */
bottom: 0;
left: 0;
width: 100%;
height: 25vh; /* Ajuste conforme necessário */
background-color: #441C1C;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 1; /* Garantir que o menu fique acima da imagem */
}

.content {
flex-grow: 1; /* Permite que o conteúdo cresça e ocupe o espaço disponível */
padding-bottom: 25vh; /* Adiciona um espaço para o menu fixo */
overflow-y: auto; /* Permite a rolagem vertical */
min-height: 100vh; /* Garante que a div tenha altura mínima */
}

form {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 5px;
}

.cadastro-div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.cadastro {
font-size: 1.8rem;
color: #FFFFFF;
text-shadow: 1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000;
margin: 0;
}

.input-div {
display: flex;
flex-direction: column;
margin: 0 15px;
}

.inputs-superiores {
display: flex;
justify-content: space-around;
}

.inputs-inferiores {
display: flex;
justify-content: space-around;
}

.label {
color: #FFFFFF;
font-weight: bold;
}
.pagina-contatiner {
display: flex;
overflow-y: auto;
}

html, body {
height: 100%; /* Garantir que o body ocupe 100% da altura */
overflow-y: auto; /* Permite a rolagem */
margin: 0; /* Remover margens padrão */
}

.background-img {
position: fixed; /* Mantém a imagem fixa no fundo */
top: 0;
left: 0;
width: 100%;
height: 100%; /* Cobrir toda a tela */
background-image: url('../../../public/images/login-background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1; /* Manter a imagem atrás de todos os outros conteúdos */
}

.menu {
position: fixed; /* Fixa o menu no fundo */
bottom: 0;
left: 0;
width: 100%;
height: 25vh; /* Ajuste conforme necessário */
background-color: #441C1C;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 1; /* Garantir que o menu fique acima da imagem */
}

.content {
flex-grow: 1; /* Permite que o conteúdo cresça e ocupe o espaço disponível */
padding-bottom: 25vh; /* Adiciona um espaço para o menu fixo */
overflow-y: auto; /* Permite a rolagem vertical */
min-height: 100vh; /* Garante que a div tenha altura mínima */
}

form {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 5px;
}

.cadastro-div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.cadastro {
font-size: 1.8rem;
color: #FFFFFF;
text-shadow: 1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000;
margin: 0;
}

.input-div {
display: flex;
flex-direction: column;
margin: 0 15px;
}

.inputs-superiores {
display: flex;
justify-content: space-around;
}

.inputs-inferiores {
display: flex;
justify-content: space-around;
}

.label {
color: #FFFFFF;
font-weight: bold;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... responsive