1
resposta

Meu Viewport só funciona no index.html, o resto é ignorado

o viewport só funcionou da home, eu refiz todos os passos nas outras páginas porém n funcionou

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

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">

</head>

<body>
    <header>
        <div class="caixa">
            <h1><img src="logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <ul class="produtos">
            <li>
                <h2>Cabelo</h2>
                <img src="cabelo.jpg">
                <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                <p class="produto-preco">R$ 25,00</p>
            </li>
            <li>
                <h2>Barba</h2>
                <img src="barba.jpg">
                <p class="produto-descricao">Corte e desenho profissional de barba</p>
                <p class="produto-preco">R$ 18,00</p>
            </li>
            <li>
                <h2>Cabelo + Barba</h2>
                <img src="cabelo+barba.jpg">
                <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                <p class="produto-preco">R$ 35,00</p>
            </li>
        </ul>
    </main>

    <footer>
        <img src="logo-branco.png">
        <p class="copyright">© Copyright Barbearia Alura - 2019</p>
    </footer>
</body>

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

1 resposta

Para cada página HTML que você cria, precisa inserir a meta tag viewport para funcionar. Se você inserir na index.html, mas não inserir em contato.html, só vai funcionar na index.html.

Basta copiar a tag de index.html e colar dentre de <head></head> da página que você quer que funcione:

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