[Bug] Estilização do CSS ( somente o tamanho) não foi para o about.html | HTML e CSS: cabeçalho, footer e variáveis CSS

3
respostas

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Aplicando variáveis CSS e atividade Conteúdo da página Sobre Mim

por Amanda Irene Nast Berwig

| 70.7k xp | 2 posts

Boa noite Mesmo colocando as classes que estão no CSS, no about.html, a página não estiliza como no index.html. Parece que no about.html esta tudo com o dobro do tamanho

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade about.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel= "stylesheet" href= "./Styles/style.css">
</head>
<body>
    <header class= "cabecalho">
        <nav class= "cabecalho_menu">
            <a class= "cabecalho_menu_link" href="index.html"> Home</a>
            <a class= "cabecalho_menu_link" href="About.html"> Sobre Mim</a>
        </nav>
    </header>
    <main class= "apresentacao">
        <section class= "apresentacao_conteudo">
            <h1 class= "apresentacao_conteudo_titulo">Sobre mim</h1>
            <p class= "apresentacao_conteudo_paragrafo"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
            </p>
            <p class= "apresentacao_conteudo_paragrafo"> Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.   
            </p>
        </section>
 <img class ="foto_pagina" src="./assets/ALN_7977.jpg" alt="Foto da Amanda" height= "533" width= "468">
    </main>

    <footer class= "rodape">
        <p> Desenvolvido por Amanda</p>
    </footer>
    
</body>
</html>

3 respostas

por Renan Cezar Wuicik

| 3167.3k xp | 6165 posts

Instrutor Suporte Educacional Start By Alura

29/06/2023

Olá Amanda, tudo bem contigo?

Eu gostaria somente de avisar que infelizmente eu não vou conseguir lhe ajudar se você não postar os seus documentos de estilos CSS.

Isso porque somente com o CSS que eu posso testar e ver se funciona aqui na minha máquina e tentar resolver o problema que você mencionou ali no post.

Portanto, eu peço que você forneça o código COMPLETO, pois se tiver qualquer parte faltando eu já não vou conseguir reproduzir o seu código.

Você pode colocar o seu código aqui no fórum e escrever qual código é de qual documento para que me localizar e assim conseguir lhe ajudar da melhor forma que eu conseguir.

Ou então você pode compartilhar o seu projeto no GitHub, Replit, CodePen ou outra plataforma de compartilhamento de código ou método que você encontrar, souber usar e/ou se sentir confortável em usar.

Em suma era isso, caso precise de mim eu estarei por aqui para ajudar.

Aguardo seu retorno e bons estudos!

por Amanda Irene Nast Berwig

| 70.7k xp | 2 posts

30/06/2023

Oi Renan, vou colocar os códigos aqui, pois eu não sei utilizar essas plataformas mencionadas, sou nova na área e essa é minha primeira experiência com programação.

Style.css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #FFE3E1;
    --cor-secundaria: #643843;
    --cor-terciaria: #FF9494;
    --cor-hover: #FFD1D1;
   
    --fonte-primaria:'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
    
}

* {
    margin: 0;
    padding: 0;

}
body {
    /*height: 100vh;*/
    box-sizing: border-box;
    background-color:var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 2% 0% 0% 15%;

}

.cabecalho_menu {
    display: flex;
    gap: 80px;
}

.cabecalho_menu_link {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600px;
    color: var(--cor-terciaria);
    text-decoration: none;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.apresentacao_conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao_conteudo_titulo {
    font-size: 36px;
    font-family: var(--fonte-primaria);
}

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

.apresentacao_conteudo_paragrafo {
    font-size: 24px;
    font-family: var(--fonte-secundaria);
}

.apresentacao_links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.apresentacao_links_subtitulo {
    font-family: var(--fonte-primaria);
    font-weight: 400px;
    font-size: 24px;
}

.apresentacao_links_link {
    border: 2px solid var(--cor-terciaria);
    display: flex;
    justify-content: center;
    gap: 16px;
    width:378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
    font-weight: 600;
}

.apresentacao_links_link:hover {
    background-color: var(--cor-hover);
    color: var(--cor-terciaria);
    padding: 3%;

}

.foto_pagina {
    border: 10px double var(--cor-terciaria);
    border-radius: 2px;
   
   
}

.rodape {
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-weight: 400;
    font-size: 24px;
}

Index.html

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./Styles/style.css">
</head>
<body>
    <header class= "cabecalho">
        <nav class= "cabecalho_menu">
            <a class= "cabecalho_menu_link" href="index.html"> Home</a>
            <a class= "cabecalho_menu_link" href="About.html"> Sobre Mim</a>
        </nav>
    </header>
    <main class= "apresentacao">
            <section class= "apresentacao_conteudo">
                <h1 class= "apresentacao_conteudo_titulo"> Eleve seu negócio digital a outro nível <strong class= "titulo-destaque" > com um Front-end de qualidade!</strong></h1>
                <p class= "apresentacao_conteudo_paragrafo">  Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em  <strong> React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
                <div class= "apresentacao_links">
                    <h2 class= "apresentacao_links_subtitulo"> Acesse minhas redes:</h2>
                    <a class ="apresentacao_links_link" href="https://Github.com/amanda_berwig">
                        <img src="./assets/github.png" alt="icon github"> 
                        Github
                    </a>
                    <a class ="apresentacao_links_link" href="https://Linkedin.com/amanda_berwig">
                            <img src="./assets/linkedin.png" alt="icon Linkedin"> 
                            Linkedin
                    </a>
                    <a class ="apresentacao_links_link" href="https://Instagram.com/amanda_berwig">
                        <img src="./assets/instagram.png" alt="icon Instagram"> 
                        Instagram
                    </a>
                    
                </div>
            </section>
            
        <img class ="foto_pagina" src="./assets/ALN_7977.jpg" alt="Foto da Amanda" height="533" width="468s">

    </main>
    <footer class= "rodape">
        <p> Desenvolvido por Amanda</p>
    </footer>
</body>
</html>

por Renan Cezar Wuicik

| 3167.3k xp | 6165 posts

Instrutor Suporte Educacional Start By Alura

04/07/2023

Oi Amanda, tudo bem contigo?

Eu analisei todo o seu código e não encontrei nada que gerasse esse comportamento que você mencionou em seu post inicial.

Mas analisando o projeto em diferentes telas eu encontrei o "bug".

Na verdade, o que aconteceu no seu projeto foi o seguinte:

Na página "HOME" você estava programando com um zoom diminuído da tela!

Eu chuto que seja por volta de 80% ou 75% de zoom, quando deveria estar com 100%
Contudo, quando você iniciou a programação da página "SOBRE MIM" o zoom foi restaurado pelo navegador, o que fez com que os elementos ficassem mais perto e o tamanho e posição dos elementos ficasse diferente da página inicial(HOME).

Nessa página você estava como o zoom em 100% que era o normal e padrão do navegador.

Eu só gostaria de deixar uma observação para explicar que pode ser que os valores que eu comentei ou que eu mostrarei abaixo não sejam os mesmos que o seu, pois os tamanhos das nossas telas podem ser diferentes e os valores do zoom e as situações sejam diferentes, uma vez que o tamanho da tela define quase tudo relacionado ao design do site. Mas a ideia de que o zoom é o agente causador dessa mudança é ideia principal desse post.

Eu vou deixar um GIF abaixo onde eu mostro essa mudança de zoom entre as telas:

gif mostrando uma mudança de zoom no projeto da aluna

Como você pode ver no GIF, eu aumentei e diminui o zoom várias vezes e alcancei o mesmo resultado que o seu. E ainda deu para mudar mais ainda o impacto visual de tudo com isso.

Mas para te ajudar e somente por curiosidade existe uma forma de controlar previamente o zoom do seu site, mas eu aviso desde já que ela nem sempre funciona, e dependendo da configuração do navegador do usuário ela pode nem funcionar.

Mas no caso eu faço dessa linha de configuração meta que fica dentro da tag <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Aqui que a escala inicial é de 1.0 (initial-scale=1.0) que corresponde a 100% da tela, mas para mudar isso é só mudar o valou disso, vou deixar uma mini tabelinha para te ajudar:

Numero na Tag	Porcentagem Correspondente
1.0	100%
0.9	90%
0.8	80%
0.75	75%

E assim por diante, dessa forma, você pode configurar a visualização/zoom que o usuário tem ao abrir o site inicialmente.

Em suma era isso, espero ter ajudado. E só lembrando que caso o problema não seja esse eu peço que você comunique, pois eu tentei encontrar algo no código, mas não encontrei nada que atrapalhasse.

Caso precise eu estarei aqui! E se não entender algo, ou se eu não fui claro o suficiente em algo peço que me comunique para que eu possa mudar a metodologia.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓