Pessoal , bom dia. Tudo bem?
Estou estou tentando fazer uma adaptação nas páginas html de um projeto do meu curso, que é um site de educação financeira.
Estou fazendo uso do Bootstrap versão 5.0.
Inclusive , eu tive acesso a documentação para estudar mais como funciona a responsividade, mas não entendi direito. Esse conceito de grids, de colunas e linhas eu já entendi. Mas na hora de colocar a mão na massa, fico perdida.
Gostaria de pedir ajuda a alguém que possa me dar uma orientação neste sentido e agradeço.
Me falaram que a minha página estava estática e não responsiva. E realmente estava estática, precisando da função responsiva.
Me explicaram que eu deveria usar funções de porcentagem % e não definir dimensões em pixels.
Já dei inicio a esta mudança para fazer a reponsividade da página, mas ainda não cheguei a um resultado definitivo. Preciso verificar com alguém experiente se estou fazendo da maneira correta.
Outro desafio que tenho: Este banner, que está se apresentando com duas margens laterais vazias e em branco, eu gostaria de deixar esse banner de fora a fora, preenchendo completamente, sem o intervalo dessas laterais que estão em branco. E queria deixar ao mesmo tempo responsivo. Tem como fazer isso ?
Segue abaixo a condição atual dos meus códigos.
Estou apresentando uma das páginas, que é a página de Fale conosco .
Segue o código HTML e o CSS
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fale-conosco</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<!--Inicio header-->
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-light" aria-current="page" href="../index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="./todas-noticias.html">TODAS AS NOTÍCIAS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
DROPDOWN
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item " href="#">Action</a></li>
<li><a class="dropdown-item " href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item " href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="./entrevistas.html">ENTREVISTAS</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="./fale-conosco.html">FALE CONOSCO</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Pesquisar" aria-label="Search">
<button class="btn btn-outline-success c" type="submit">Pesquisar</button>
</form>
</div>
</div>
</nav>
</header>
<!--Fim header-->
<main>
<!--Início do banner-->
<div class="container">
<div class="banner-fale-conosco">
<img src="../img/bannerfaleconosco.png" class="img-thumbnail" alt="Bannerfaleconosco">
</div>
</div>
<!--Fim do banner-->
<!--Início do título-->
<div class="container">
<div class="titulo-fale-conosco"></div>
<br>
<h3>Para dúvidas, críticas e sugestões, entre em contato conosco.</h3>
</div>
</div>
<!--Fim do título-->
<!-- Inicio do formulário -->
<div class="formulario">
<div class="container-md">
<div class="col-md-5 ml-auto">
<br>
<br>
<label for="formGroupExampleInput" class="form-label">Nome e sobrenome</label>
<input type="text" class="form-control" id="formGroupExampleInput"
placeholder="Digite o seu nome e sobrenome">
<br>
<label for="formGroupExampleInput2" class="form-label">Email</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Digite o seu email">
<br>
<label for="formGroupExampleInput2" class="form-label">Celular/Whatsapp</label>
<input type="text" class="form-control" id="formGroupExampleInput2"
placeholder="Digite o seu número de celular ou whatsapp">
<br>
<label for="exampleFormControlTextarea1" class="form-label">Mensagem</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<br>
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Enviar</button>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- Fim do formulário -->
<!--Inicio Vlibras-->
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>
<!--Fim Vlibras-->
</main>
<!--Inicio footer-->
<footer class="bg-light text-start text-dark pt-5 pb-4 mt-4">
<div class="container text-md-start">
<div class="row text-md-start">
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h5 class="text-uppercase mb-4 font-weight-bold text-info">
Sobre nós
</h5>
<hr class="mb-4">
<p>
O site que te ajuda a criar consciência financeira e obter informações sobre economia de forma descomplicada.
</p>
</div>
<!--Link das Paginas-->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h5 class="text-uppercase mb-4 font-weight-bold text-info">
Páginas
</h5>
<hr class="mb-4">
<p>
<a href="index.html" class="text-dark" style="text-decoration: none">Home</a>
</p>
<p>
<a href="pages/todas-noticias.html" class="text-dark" style="text-decoration: none">Todas as
Notícias</a>
</p>
<p>
<a href="pages/entrevistas.html" class="text-dark" style="text-decoration: none">Entrevistas</a>
</p>
<p>
<a href="pages/economia-covid.html" class="text-dark" style="text-decoration: none">Economia X
Covid</a>
</p>
<p>
<a href="pages/fale-conosco.html" class="text-dark" style="text-decoration: none">Fale
Conosco</a>
</p>
</div>
<!--//Link das Paginas-->
<!--Contact-->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h5 class="text-uppercase mb-4 font-weight-bold text-info">Contato</h5>
<hr class="mb-4">
<p>
Salvador, Bahia - Brasil
</p>
<br>
<p>
financeiramente2021@gmail.com
</p>
<br>
<p>
+55 71 90000-0000
</p>
</div>
<!--//Contact-->
<hr class="mb-4">
<div class="row d-flex justify-content-center text-center">
<p>
Copyright 2021 © Todos os direitos reservados por
<a href="#" style="text-decoration: none;">
<strong class="text-info">Financeiramente</strong></a>
</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="text-center">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a href="#" class="text-dark"><i class="fab fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-dark"><i class="fab fa-whatsapp"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-dark"><i class="fab fa-youtube"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!--Fim Footer-->
Segue o código CSS ( que alterei até o momento):
/*
Estilizando Página Fale-conosco
*/
.banner-fale-conosco{
width: 100%;
max-width: 1200px
}
.titulo-fale-conosco{
width: 100%;
max-width: 980px;
}
.formulario{
width: 100%
}