Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não consigo fazer a fonte do menu e nem o logo ficarem do tamanho certo

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por Rubia Della Volpe
| 73.4k xp | 10 posts

Saudações galera da alura!

Eu to com problemas para deixar a minha página responsiva para mobile. Por algum motivo não consigo aumentar a fonte por nada nesse mundo, e nem deixar o logo de um tamanho adequado. Talvez seja algo que eu tenha feito de errado antes e que esteja afetando agora. Alguém consegue me ajudar, por favorzinho?

Eu vou ter que colocar o link do repositório no github, porque ultrapassa o limite da pergunta aqui.

Segue o link: https://github.com/ruvolpe/sylveonbarbershop

Os arquivos que eu estou com problema são o index.html e style.css

Obrigada!

4 respostas
por Alisson Ferreira Evangelista
| 46.8k xp | 20 posts

Boa Tarde Rubia,

Queres aumentar a fonte de qual elemento? fiz um teste com os dois elementos abaixo para identificar algum tipo de erro, mas estão funcionando a principio

nav a {
    text-transform: uppercase;
    color: #95daf8;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
.logo{
    width: 100px;
    margin: 0 10%;
}
por Rubia Della Volpe
| 73.4k xp | 10 posts

Boa tarde =)

Então, eu quero aumentar apenas a fonte do menu de navegação quando a largura da página for até 480 px, focando na responsividade mobile. Aqui está a parte do meu código que foca nisto:

@media screen and (max-width: 480px) {
    .about, .map, .video {
        width: auto;
    }

    .box, .benefits-content {
        width: 100%;
    }

    nav {
        position:static;
    }

    nav a {
        font-size: 40px;
    }

    .benefits-list, .benefits-image {
        width: 100%;
    }

Teoricamente está tudo certo, mas quando eu vejo no google chrome a fonte continua pequena.

solução!
por Renan Lima
| 3650k xp | 7692 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Rubia. Olhei o seu projeto e percebi que não tem a tag meta do viewport, deve ser por isso que não está aparecendo as suas modificações no modo responsivo.

Adiciona tag meta do viewport no <head></head> do seu arquivo index:

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

Depois de fazer isso será possível ver as suas modificações no modo responsivo!

por Rubia Della Volpe
| 73.4k xp | 10 posts

Opa, muito obrigada! Deu certo =)