Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

O mobile first com .secao {width:100%;} não é aplicado

Olá,

no teste de responsividade com a opção responsive da ferramenta de desenvolvedor ativa, a secao nunca fica com width 100%, são exibidas o mínimo de duas colunas mesmo em telas com menos de 600px, o que pode ser?

<div class="secao">

            <a href="noticia1.html" class="chamada noticias principal">
                <h2>Descoberto mais um esquema de espionagem da NSA</h2>
            </a>
            <a href="noticia2.html" class="chamada noticias normal">
                <h2>Deputado é pego em vídeo pedindo propina</h2>
            </a>
            <a href="noticia3.html" class="chamada noticias normal">
                <h2>Acidente na BR-42 mata 12 da mesma família</h2>
            </a>
            <a href="noticia4.html" class="chamada noticias normal mini">
                <h2>NASA acha indícios de vida em Marte</h2>
            </a>
            <a href="noticia5.html" class="chamada noticias normal mini">
                <h2>Recorde de vendas do Xbox One</h2>
            </a>
            <!--<a href="noticia14.html" class="chamada noticias normal">
                <h2>BC anuncia nova alta nos juros</h2>
            </a>-->
            <a href="noticia11.html" class="chamada famosos normal">
                <img src="img/entretenimento1.jpg" alt="Atriz na praia">
                <h2>Atriz da Globo passeia com filho em Copacabana</h2>
            </a>
            <a href="noticia6.html" class="chamada esportes normal">
                <h2>Estádios das Olimpíadas estão atrasados</h2>
            </a>
        </div>

        <div class="secao">
            <a href="noticia7.html" class="chamada esportes normal mini">
                <img src="img/esporte1.jpg" alt="Time perdedor">
                <h2>Time perdedor é rebaixado para Série B</h2>
            </a>
            <a href="noticia8.html" class="chamada esportes normal mini">
                <img src="img/esporte2.jpg" alt="Time vencedor">
                <h2>Time vencedor sobe para Série A da Copa</h2>
            </a>
            <a href="noticia9.html" class="chamada esportes normal">
                <h2>Transferência milionária de craque para a Europa</h2>
            </a>
            <a href="noticia10.html" class="chamada famosos normal">
                <h2>BBB: brothers vão pra piscina</h2>
            </a>
            <a href="noticia12.html" class="chamada famosos normal">
                <h2>Subcelebridade faz algo estúpido para aparecer</h2>
            </a>
            <a href="noticia16.html" class="chamada famosos">
                <h2>Casal de famosos se separa</h2>
            </a>
            <a href="noticia13.html" class="chamada famosos normal">
                <h2>Novela tem cena decisiva nessa sexta-feira</h2>
            </a>
            <a href="noticia15.html" class="chamada esportes">
                <h2>Jogador é flagrado em festança promíscua</h2>
            </a>

        </div>

        <div class="secao">
            <a href="video.html" class="tv chamada normal famosos">
                <img src="img/tv1.jpg" alt="Roupão">

                <p>BBB</p>
                <h2>Jeílson usa roupão de bolinhas verdes e é consolado</h2>

                <span class="bolinha"></span>
                <span class="bolinha"></span>
                <span class="bolinha"></span>
            </a>
        </div>
.secao{
  width: 100%;
}

@media (min-width: 600px) {
    html {
        font-size: 1.125em;
    }
    .secao {
        width: 50%;
        float: left;
    }
}
@media (min-width: 1000px) {
    html {
        font-size: 1.25em;
    }
    .secao {
        width: 33.333%;
    }
}
1 resposta
solução!

Estava faltando a meta tag

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

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