I’m having a problem with div elements in HTML and CSS and it’s a problem relating to the responsiveness of the code on smaller screens.
The page has the main content that is fixed to the top (all okay with it), it has a place where icons of some programming knowledge are, a place where projects cases/link for modals are (about six, which are structured to be aligned 3/3 or 2/2/2 or 1/1/1/1/1/1 as the screen demands) and the footer.
The issue is that everything aligns well in screens with smaller heights, but the project cases always overlap the footer.
There is a screenshot attached to this question showing what I’m trying to explain.
I will show the code in html and after the css for it:
Here are the divs in html:
body {
margin: 0;
padding: 0;
height: 420vh;
background-color: rgb(15, 16, 43);
/* Background color */
overflow: hidden;
font-family: 'Poppins', sans-serif;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
font-size: 27px;
font-weight: 700;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
/* PROJECT DIV FOR WIDTH =>768px WORKS WELL*/
.skills-projects {
margin: 0 auto;
/* Centraliza a div */
padding: 40px 20px;
/* Ajuste o padding lateral para 20px */
width: 100vw;
max-width: 1200px;
/* Define uma largura máxima */
margin: 0;
/* Remove margens */
background-color: white;
/* Fundo branco para a seção */
padding: 40px 40px;
/* Espaçamento interno */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Sombra para profundidade */
border-radius: 8px;
/* Cantos arredondados */
}
.portfolio-container {
display: flex;
/* Layout flexível */
flex-wrap: wrap;
/* Permite quebra de linha */
justify-content: center;
/* Centraliza os projetos */
gap: 15px;
/* Espaço entre os projetos */
margin-bottom: 300px;
/* Espaço abaixo da seção de projetos */
}
.title-portfolio-container {
font-size: 40px;
margin-top: 130px;
color: #2c3e50;
text-align: center;
/* Center align the portfolio title */
margin-bottom: 40px;
/* Increased space below the title */
}
.project {
width: 100%;
/* Largura total para responsividade */
max-width: 300px;
/* Largura máxima para cada projeto */
height: 200px;
/* Altura fixa para uniformidade */
overflow: hidden;
/* Oculta o excesso */
border-radius: 8px;
/* Cantos arredondados */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
/* Sombra sutil */
transition: transform 0.3s, box-shadow 0.3s;
/* Efeito de transição */
text-decoration: none;
/* Remove sublinhado */
color: inherit;
/* Herda a cor do pai */
position: relative;
/* Posicionamento relativo para sobreposição */
}
@media screen and (max-width: 768px) {
/* Estilos para telas com largura máxima de 768px */
/* Corpo e HTML */
body,
html {
overflow-x: hidden;
/* Evita rolagem horizontal */
height: 100%;
/* aumentei o tamanho assim cabe mais coisa*/
}
body {
display: flex;
flex-direction: column;
min-height: 400vh;
/* Garante que o corpo da página ocupe pelo menos 100% da altura da viewport */
margin: 0;
}
.portfolio-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
min-height: calc(100vh - 160px);
/* Ajuste a altura mínima para evitar sobreposição */
margin-bottom: 300px;
}
.skills-projects {
padding: 40px 20px 40px 20px;
/* Ajuste o padding lateral para 20px */
width: 100vw;
max-width: 1200px;
/* Define uma largura máxima */
margin: 0;
/* Remove margens */
background-color: white;
/* Fundo branco para a seção */
padding: 40px 40px;
/* Espaçamento interno */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Sombra para profundidade */
border-radius: 8px;
/* Cantos arredondados */
padding-bottom: 300px;
/* Margem superior */
}
.portfolio-container {
background-color: white;
display: flex;
/* Layout flexível */
flex-wrap: wrap;
/* Permite quebra de linha */
justify-content: center;
/* Centraliza os projetos */
gap: 15px;
/* Espaço entre os projetos */
margin-bottom: 10px;
/* Espaço abaixo da seção de projetos */
flex-grow: 1;
}
.title-portfolio-container {
margin-right: 20px;
margin-left: 20px;
font-size: 23px;
margin-top: 130px;
color: #2c3e50;
text-align: center;
/* Center align the portfolio title */
margin-bottom: 40px;
/* Increased space below the title */
}
.project {
width: 100%;
/* Largura total para responsividade */
padding: 0 20px 10px 20px;
max-width: 300px;
/* Largura máxima para cada projeto */
height: 200px;
/* Altura fixa para uniformidade */
overflow-x: hidden;
/* Oculta o excesso */
border-radius: 12px;
/* Cantos arredondados */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
/* Sombra sutil */
transition: transform 0.3s, box-shadow 0.3s;
/* Efeito de transição */
text-decoration: none;
/* Remove sublinhado */
color: inherit;
/* Herda a cor do pai */
position: relative;
/* Posicionamento relativo para sobreposição */
}
.project img {
width: 100%;
/* Full width for images */
height: 100%;
/* Full height for images */
object-fit: cover;
/* Cover to maintain aspect ratio */
display: block;
/* Block display to remove gaps */
}
/* FOOTER */
.footer {
height: 2vh;
bottom: 0;
position: absolute;
/* Posição absoluta */
padding-top: 30px;
/* Margem superior */
z-index: 1;
}
.fale {
font-size: 40px;
}
.footer-form {
margin: 0 30px 0 30px;
}
.footer-contact {
text-align: center;
/* Center-aligns text */
}
.contact-container {
display: flex;
flex-direction: column;
/* Stack items vertically */
align-items: center;
/* Center-align items */
gap: 1px;
/* Adjust the gap to bring them closer */
}
.contact-item {
margin: 10px 0;
/* Space between items */
display: flex;
align-items: center;
/* Align icon and text */
}
.contact-item i {
margin-right: 10px;
/* Space between icon and text */
}<!--This div has the skills container and the projects container-->
<div class="skills-projects">
<!--The skills container-->
<div id="skills" class="container-skills">
<div class="skills">
<h2 class="skills-title">Minhas Skills</h2>
<ul>
...
</ul>
</div>
</div>
<!--Projects container-->
<div id="projects" class="container-projects">
<div class="title-portfolio-container">
<h2 class="display-4">Meus Projetos</h2>
<p class="lead">Uma showcase do meu trabalho.</p>
</div>
<div class="portfolio-container row">
<a href="#modal-authp" class="col-md-4 col-sm-6 project">
<img src="{{ asset('images/projects/authp.png') }}" alt="Projeto 1" class="img-fluid">
<div class="project-overlay">
<span class="overlay-text">Abrir</span>
</div>
</a>
</a>
</div>
</div>
</div>
<footer id="contact" class="footer">
<div class="fale">Fale comigo</div>
<div class="footer-form">
<form>
<input name="name" type="text" class="feedback-input" placeholder="Nome(*)" />
<input name="email" type="text" class="feedback-input" placeholder="Email(*)" />
<input name="topico" type="text" class="feedback-input" placeholder="Tópico(*)" />
<textarea name="text" class="feedback-input" placeholder="Sua mensagem(*)"></textarea>
<button type="submit" class="submit-button">
Enviar <i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
<div id="footer-contact" class="footer-contact">
<div class="contact-container">
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>xx xxxxx</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>[email protected]</span>
</div>
</div>
</div>
<div class="footer-copyright">
© Copyright 2024 xxx
</div>
</footer>screenshoot:[
1