I am doing my own portfolio site using HTML and CSS, so far so good. All the other pages are responsive and looking good, but there is one page that for some reason the HTML body does not obey the width of the present screen, specifically cellphones with lower width.
After testing I realised that for some unknown reason from 940px and below, the width LOCKS and doesn’t change according to the screen.
html {
scroll-behavior: smooth;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(210, 208, 208, 0.633);
overflow-x: hidden;
height: auto;
width: auto;
}
.conteudo {
display: flex;
flex-direction: column;
align-items: center;
width: 45svb;
height: auto;
margin: 30px 30px;
}
.botao_voltar {
display: flex;
flex-direction: inherit;
position: fixed;
z-index: 30;
align-items: flex-start;
height: 60px;
justify-content: center;
width: 45vmax;
padding: 20px 20px;
margin-top: 30px;
background: rgba(172, 170, 170, 0.452);
border-radius: 80px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37);
backdrop-filter: blur(17.5px);
}
.botao_voltar button {
border: 0;
border-radius: 35px;
background-color: #FF5F1F;
color: white;
font-family: 'Poppins', sans-serif;
width: 110px;
height: 60px;
font-weight: 700;
font-size: 30px; /* Cria uma responsividade legal*/
padding: 10px 10px;
transition: all .7s ease;
}
.botao_voltar button:hover {
transform: translate3D(0,-1px,0) scale(1.20); /* move up slightly and zoom in */
box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04);
transition: all .7s ease; /* zoom in */
cursor: pointer;
}
.corpo {
display: flex;
position: relative;
flex-direction: column;
width: 40vmax;
padding: 50px 50px;
margin-top: 120px;
background: #FF5F1F;
border-radius: 80px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37);
backdrop-filter: blur(17.5px);
}
.corpo h1 {
text-align: start;
font-family: monospace;
font-size: 60px;
font-weight: 700;
color: rgb(252, 248, 248);
text-wrap: balance;
}
.corpo img {
margin-top: 50px;
width: inherit;
border-radius: 60px;
object-fit: cover;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.37);
backdrop-filter: blur(17.5px);
}
.corpo p {
text-align: justify;
font-family: 'Corporate';
font-size: 25px;
line-height: 3.5rem;
word-spacing: 0.5px;
color: rgb(252, 248, 248);
text-wrap: balance;
}
.copyright {
display: flex;
align-items: flex-end;
font-size: 20px;
font-family: "Corporate";
color: black;
}<div class="botao_voltar">
<a href="/Projetos/index.html"><button>Voltar</button></a>
</div>
<div class="conteudo">
<div class="corpo">
<h1>Reconhecimento Facial Usando CNN</h1>
<img src="https://picsum.photos/300">
<p>
Criei este projeto simples meramente por questões didáticas
já que estava estudando CNN (Convulational Neural Networks).
Basicamente eu montei um modelo do zero, não utilizei nenhuma
arquitetura pronta, como RES-NET ou ALEX-NET, ao invés montei
eu mesmo, de forma bem amadora mas para simplesmente entender a
lógica por trás do CNN.
</p>
</div>
</div>
<p class="copyright"> © 2024 Luiz Fernando Brasão</p>Below are some images demonstrating my problem:
Here so far so good
Width not working properly
Here working properly as it should
I see you use “vmax” in width of some css, so when the height larger than the width of screen your layout will not show right. You should use “vw”.
1