Solucionado
Não estou conseguindo entender porque a responsividade do meu código não vai intercalando, como acontece na vídeo aula! No meu código, a resolução para tablet só aparece quando atinge 1024px. A largura dos elementos não vai aumentando gradativamente, entendem? Vejam a imagem abaixo....
O que posso estar fazendo errado?
Esse é o meu código CSS.
@media screen and (min-width: 64rem) {
.cabecalho__menu {
display: none;
}
.cabecalho {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 64rem;
}
.cabecalho__logo {
margin-left: 5rem;
padding: 0 4px 0 0;
}
.cabecalho__titulo {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
width: 9.75rem;
height: 1.875rem;
font-size: 1.875rem;
line-height: 1.875rem;
margin-top: 10px;
padding-right: 3.5625rem;
display: block;
}
.cabecalho__titulo--negrito {
font-weight: 700;
font-size: 1.875rem;
font-family: 'Josefin Sans', sans-serif;
}
.cabecalho__menu-tablet {
display: block;
}
.menu-tablet__container {
display: flex;
flex-direction: row;
gap: 32px;
padding-right: 2.9375rem;
}
.menu-tablet__link {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
color: #000000;
}
.cabecalho__coracao {
display: none;
}
.cabecalho__sacola {
margin-right: 38px;
}
}
Oi Flávio,
Olhando para esse trecho de estilo CSS me parece ok. Você teria esse código em algum repositório (Github) para eu dar uma olhada nos outros arquivos de estilo e ver o que pode estar causando isso?
Nota: Em alguns casos basta fechar e abrir novamente a Dev tools atualizar a página que resolve logo.
Olá, João. Obrigado por sua disposição em querer ajudar, mas já consegui resolver o problema com a comunidade no Discord. Obrigado!
Show!!!
top bom que conseguiu resolver, Flávio.