Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] LAYOUT DIFERENTE DO VÍDEO COM FONTE SIZE REM E TAM FONTE MÉDIO E MUITO GRANDE

Ao mudar a fonte do projeto para o rem como orientado no vídeo da aula, os elementos da tela ficam muito pequenos, mesmo com a aparencia em médio(recomendado) e ao colocar na fonte 'muito grande' ele apenas mostra o tamanho da fonte praticamente igual ao tamanho que fica com a fonte em pix (NO VÍDEO OS ELEMENTOS DA PÁGINA FICAM BEM GRANDES E APARECE UMA BARRA DE ROLAGEM PARA PERCORRER A PÁGINA TODA). Podem me orientar sobre o que pode estar errado no código?

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root{
    --cor-primaria: #000000;
    --cor-secundaria: #dcd7C9;
    --cor-terciaria: #22d4fd;
    --cor-hover: #272727;

    --font-primaria:'Krona One', sans-serif;
    --font-secundaria:'Montserrat' , sans-serif; 
}

* {
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}
.cabecalho {
    padding: 2% 0% 0% 13%;
}
.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: var(--font-secundaria);
    font-size: 1,5rem;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}
.apresentacao {
    padding: 3% 16%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo {
    width: 635px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.apresentacao__conteudo__titulo {
    font-size: 2,25rem;
    font-family: var(--font-primaria);
}

.titulo-destaque {
    color: var(--cor-terciaria);
    }

.apresentacao__conteudo__texto {
    font-size: 1,5rem;
    font-family: var(--cor-secundaria);
}
.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 33px;
}
 
 .apresentacao__links__subtitulo {
    font-family: var(--font-primaria);
    font-weight: 400;
    font-size: 1,5rem;
 }   
.apresentacao__links__subtitulo: {
    color: var(--cor-secundaria);
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 1,5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family:var(--font-secundaria);
}
.apresentacao__links__link:hover {
    background-color: #272727;
}
.rodape {
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family: var(--font-secundaria);
    font-size: 1,5rem;
    font-weight: 400;
    }

TELAS ABAIXO COM O CÓDIGO DE FONT SIZE REM E TAM. FONTE MEDIO Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

TELAS ABAIXO COM O CÓDIGO DE FONT SIZE REM E TAM. MUITO GRANDE Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

TELA COM O FONT SIXE EM PIX e TAM. FONTE MÉDIO(RECOMENDADO).NÃO MUDOU TANTO COMPARADO COM O TAM. MUITO GRANDE ACIMA.( A NÃO SER O 'ACESSE MINHAS REDES' QUE FICOU MENOR. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Olá Ana! Tudo ok contigo?

Primeiramente, é importante notar que o tamanho da fonte definido em rem é relativo ao tamanho da fonte do elemento raiz do documento HTML, que é o <html>. Se não houver uma definição de tamanho de fonte para o <html>, o navegador usará o tamanho de fonte padrão, que geralmente é 16px. Isso significa que 1rem será igual a 16px, a menos que você defina um tamanho diferente para o <html>.

No seu CSS, não foi especificado isso, então ele tomou o valor padrão do navegador. Se desejar isso pode ser alterado dessa forma:

html {
    font-size: 16px; /* ou outro valor que você preferir */
}

Ou também pode ser feito assim:

:root {
    font-size: 16px /* ou outro valor se preferir */
}

Além disso, notei que nas declarações de tamanho de fonte no seu CSS, você está usando vírgulas (,) ao invés de pontos (.) para definir os valores decimais. Isso pode fazer com que o navegador não interprete corretamente o tamanho desejado. Por exemplo, font-size: 1,5rem; deve ser alterado para font-size: 1.5rem;. Faça essa correção em todas as declarações de propriedades que estão com vírgula.

Faça essas alterações e veja se o comportamento das fontes fica mais próximo do que você espera.

Era isso, espero ter ajudado, se precisar conte com o fórum!

Abraços e bons estudos!

De fato ao fazer as correções dos valores rem sem as virgulas foi possivel adequar os itens melhor. Mas também fiz alterações em vários outros pontos do código (diminuindo os valores em px e os adequando aos valores em rem) e finalmente o layout se encaixou na tela do meu notebook. Obrigada pela orientação.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software