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

Site não está ficando responsivo

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Arrumando os elementos com flex para mobile e atividade Terminando mobile

por LEONARDO JOSE BASILIO NUNES
| 82.8k xp | 16 posts

Eu boto exatamente o código usado na aula porém o site permanece não responsivo.

Segue meu código:

 /* parte mobile */
@media(max-width: 768px) {

    .cabecalhoPrincipal-nav {
        flex-direction: column;
        font-size: 1.2em;
    }

    .cabecalhoPrincipal .container {
        flex-direction: column;
        justify-content: space-between;
        align-items: initial;
        text-align: center;
    }

    .conteudoPrincipal-cursos {
        flex-direction: column;
    }

    .conteudoPrincipal-cursos-link {
        width: 100%;
    }

    .rodapePrincipal-navMap-list {
        text-align: center;
        font-size: 1.2em;
        height: auto;
    }

    .rodapePrincipal-patrocinadores .container {
        flex-direction: column;
        align-items: center;
    }

    .rodapePrincipal-patrocinadores-list {
        width: 100%;
        margin: 0;
    }

    .rodapePrincipal-contatoForm {
        width: 100%;
    }

    .rodapePrincipal-contatoForm-fieldset {
        justify-content: center;
    }

}
4 respostas
por Estudante
| 274.4k xp | 229 posts

Oi Leonardo,

Pode postar seu html também pra gente analisar?

por LEONARDO JOSE BASILIO NUNES
| 82.8k xp | 16 posts
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alurinha | Cursos online</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>

    <header class="cabecalhoPrincipal">
        <div class="container">
            <h1 class="cabecalhoPrincipal-titulo">
                <a href="#">Alurinha</a>
            </h1>

            <nav class="cabecalhoPrincipal-nav">
                <a class="cabecalhoPrincipal-nav-link" href="#">Home</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Cursos</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Sobre nós</a>
                <a class="cabecalhoPrincipal-nav-link" href="#">Contato</a>
                <a class="cabecalhoPrincipal-nav-link cabecalhoPrincipal-nav-link-app" href="#">Nosso APP</a>
            </nav>
        </div>

    </header>

    <main class="conteudoPrincipal">
        <div class="container">
            <h2 class="subtitulo">Nossos cursos</h2>

            <nav>
                <ul class="conteudoPrincipal-cursos">
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Java</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">PHP</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Ruby on Rails</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">.NET</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Pascal</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Flexbox</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Desenvolvimento Web</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Java Web</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Javascript</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">AngularJS</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">TDD com C</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Redes de computadores</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">MySQL</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">MariaDB</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Postegres</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                </ul>
            </nav>
        </div>

        <section class="videoSobre">
            <div class="container">
                <iframe class="videoSobre-video" width="560" height="315" src="https://www.youtube.com/embed/bIlOsJzBVaY?list=PLh2Y_pKOa4UcF1BYPJR3EIMRi3nWAUxIp" frameborder="0" allowfullscreen></iframe>

                <div class="videoSobre-sobre">
                    <h2 class="videoSobre-sobre-title">Vantagens do Alurinha</h2>
                    <ul class="videoSobre-sobre-list">
                        <li class="videoSobre-sobre-item">Estude onde quiser</li>
                        <li class="videoSobre-sobre-item">Novos cursos todos os meses</li>
                        <li class="videoSobre-sobre-item">Cursos compatíveis com o mercado</li>
                    </ul>
                    <button class="videoSobre-button">Cadastre-se já</button>
                </div>
            </div>
        </section>

    </main>
por LEONARDO JOSE BASILIO NUNES
| 82.8k xp | 16 posts
    <footer class="rodapePrincipal">
        <div class="container">

            <section class="rodapePrincipal-navMap">
                <h3 class="subtitulo">Mapa de cursos</h3>
                <nav class="rodapePrincipal-navMap-list">

                    <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Java</a>
                    <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Python</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>

                    <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
                    <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>

                    <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
                    <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
                    <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
                    <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Django</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>

                    <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
                    <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>

                </nav>
            </section>

        </div>

        <section class="rodapePrincipal-patrocinadores">
            <div class="container">
                <ul class="rodapePrincipal-patrocinadores-list">
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-alura" href="#">
                            <img src="img/logos/alura.svg" alt="Logo da Alura">
                        </a>
                    </li>
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-caelum" href="#">
                            <img src="img/logos/caelum.svg" alt="Logo da Caelum">
                        </a>
                    </li>
                    <li>
                        <a class="rodapePrincipal-patrocinadores-list-link patrocinadores-list-link-casaDoCodigo" href="#">
                            <img src="img/logos/cdc.svg" alt="Logo da Casa do Código">
                        </a>
                    </li>
                </ul>
                <form class="rodapePrincipal-contatoForm" action="#">
                    <fieldset>
                        <legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre em contato conosco</legend>
                        <div class="rodapePrincipal-contatoForm-fieldset"> 
                            <input class="rodapePrincipal-contatoForm-emailInput" type="email" name="email-contato" id="email-contato">
                            <button class="rodapePrincipal-contatoForm-submit" type="submit">Enviar</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </section>
    </footer>

</body>
</html>
solução!
por LEONARDO JOSE BASILIO NUNES
| 82.8k xp | 16 posts

Conseguir achar o erro, tinha um problema no html porque não salvei.